I'm using Chrome Version 37.0.2062.120 m
I have a carousel created in owl carousel 2 and added a number of different CSS3 animations for transitions. The problem is Chrome always keeps a section of the top left of the carousel on screen during any transition.
It is not an element being kept on screen, but a glitch of different sizes cut through the carousel.
I have included an example here:
Javascript
this.$el.owlCarousel({
nav:true,
autoplay:true,
items:1,
margin:5,
loop:true,
center:true,
onTranslated: _.bind(this.translated,this),
animateIn: 'fadeInDown', // <-- css3 transition class
animateOut: 'fadeOutDown', // <-- css3 transition class
});
// gets the id of the slide and updates the data
translated: function (){
var currentSlideId = this.$el.find(".owl-item.active > .item").attr('id');
slideModule.loadSlide(currentSlideId);
}
css
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
you can try:
owl-carousel .owl-item { -webkit-transform: translateZ(0) !important; }
hope it help :)
Related
I am trying to make an svg img shake with CSS keyframes when you hover over it.
This is the effect I am trying to achieve: https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J
There is some javascript that animates the same svg but it targets a parent div #ellipse, that moves from left to right whenn clicked on the hamburger icon. I don't see how it could interfere, but I've added it just to make sure.
I have added the relevant code below. For the full code please see the website.
// Other unrelated(!?) animations on #ellipse //
function moveEllipseRight() {
ellipse.animate([
// keyframes
{
transform: 'translateX(0px)'
},
{
transform: 'translateX(' + width + 'px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{
transform: 'translateX(' + width + 'px)'
},
{
transform: 'translateX(0px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
#ellipse {
position: absolute;
top: 120px;
z-index: -99;
animation: 3s linear 0s slide 1;
left: -200px;
}
img.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<div id="ellipse">
<img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>
The issue is with your #ellipse style.
#ellipse {
position: absolute;
top: 120px;
z-index: -99; /* remove this, it is not doing anything useful. */
animation: 3s linear 0s slide 1;
left: -200px;
}
the issue was, hover was not getting triggered at all, as it was behind container element due to negative z-index. This negative z index is not useful at all, unless you are planning to put text above the image, which I do not see in your site.
I installed animate.css and am quite happy with it. Only one thing I cannot change: the amount of the position change.
In particular I use the animation "fadeInUp" and want to change from what point exactly the fading starts. At the moment it's too much.
I checked the css file but the only thing I found concerning this is:
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
I can't see how I can change that here. Any help is highly appreciated.
I have created a simple css animation that translates an pseudo element vertically. This animation works great in Chrome, FireFox and Safari but not so much in Microsoft Edge or Internet Explorer.
I am struggling to figure out the reason for this bug. Any help would be great!
How the animation should look:
How it looks in Edge and IE:
Animation example: https://jsfiddle.net/9x5vckhb/
#keyframes scroll {
0% {
transform: translate(-50%, 20%);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate(-50%, 120%);
opacity: 0;
},
100% {
transform: translate(-50%, 120%);
opacity: 0;
}
}
I am wondering if this is a bug or not. I for the life could not wrap my head around this. It seemed like the x & y were being swapped after the first animation loop. Switched to transform3d() and it worked perfectly.
Fiddle
&:before {
content: '•';
font-size: round($width/100*63.3);
top: 0;
transform: translate3d(-50%, 30%, 0);
animation: scroll ease 3s;
animation-iteration-count: infinite;
}
And
#keyframes scroll {
0% {
transform: translate3d(-50%, 20%, 0);
opacity: 0;
},
30% {
opacity: 1;
},
40% {
opacity: 1;
},
70% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
},
100% {
transform: translate3d(-50%, 120%, 0);
opacity: 0;
}
}
Here's the demo: http://codepen.io/anon/pen/WGLGyY
the DIV doesn't rotate when the keyframe is:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: scale(2, 2) rotate(180deg) translate(200px,200px)
}
}
when I change the keyframe to:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: rotate(360deg) scale(2, 2) translate(200px,200px)
}
}
It rotate again.
So what's the reason here?
I know the order may affect the transform.
Maybe because rotate(360deg) equals rotate(0); But when I change the order of transform it comes back again....
Use transform: none for your first keyframe, and it will rotate.
Here it is in action:
#keyframes test1{
0% {
transform: none;
}
100% {
transform: scale(2, 2) rotate(360deg) translate(200px,200px)
}
}
#test{
width:200px;
height: 200px;
background: red;
animation: test1 3s infinite
}
<div id="test"></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I was wondering how I could stop an animation from starting until it has been scrolled in to full view. I am using a plugin, animate.css by Dan Eden to animate my elements. I have added the animation and it works perfectly but I need to know how to make it only start once it is in full view.
This is the code for the element I have animated using class:
<div class="animated fadeInUp" id="enter-title"><img src="/images/welcome-text/enter.png" width="473" height="227"/></div>
This is the animation code:
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
.animated.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
If you're looking to hold back the animation until the image is scrolled into view you could use a little jQuery like so:
Working Example
jQuery
$(window).scroll(function () {
var y = $(window).scrollTop(),
x = $('.animated').offset().top - 200;
if (y > x) {
$('.animated').addClass('fadeInUp').removeClass('fadeOutDown');
} else {
$('.animated').removeClass('fadeInUp').addClass('fadeOutDown');
}
});
CSS
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
opacity:0; /*** Important Bit ***/
}
.animated.hinge {
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
#-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
#-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
#keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
I added an additional animation to fade the image back out when you scroll back up, its optional, but I think it makes for a nice effect.
You need to constantly check if the element is in view each time the page is scrolled.
There is this neat jQuery plugin called Bullseye which might help you.