My CSS animation declares an animation-play-state: paused on div:hover. Problem is (atleast in Chrome), the animation stutters/jumps when hovering off the element.
Here's a jsFiddle: http://jsfiddle.net/AHqLE/
Has anyone experienced this?
Try adding -webkit-transform: translateZ(0); or -webkit-transform: translate3d(0,0,0); to force hardware acceleration. I add this to any transition or animation I use so that Chrome doesn't leave trails.
I can confirm that this now works in the latest Chrome version (Version 31.0.1650.63)
An additional note to this issue: I believe I solved it (at the time) by using top/bottom values as opposed to translateY values
Related
I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:
In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.
In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.
This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.
Here is the code: http://codepen.io/jabes/pen/pNgRrg
I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.
try:
.animator {
width: calc(100% - 100px);
animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}
The delay goes right after the timing function.
In the latest version of Chrome browser (Version 33.0.1750.1170), I have animations that have stopped working all of a sudden.
Site: http://multipurpose.joostrap.com/
There is an area for Testimonials that should transition in some div's.
i.e.
<div class="testimonial-box fadeInLeft animated">
I thought the issue might be #-webkit-keyframes in the CSS file, but it doesn't look to be this.
Is anyone else having this trouble with the latest Chrome browser or maybe have a fix?
EDIT:
I have changed the site to use the un-minifeid css version of the css. The relevant files are 'animations.css' and 'combined.css'. Hope this helps.
Simple answer
I think you are trying to get stuff to fade in from 0 opacity with a bit of a slide, no?
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
What you need to add is animation-fill-mode: forwards so that it sticks on the last frame of the animation.
You can see an example (webkit only) here on jsFiddle.
Explanation
When you run an animation in CSS, the browser will automatically return the element to the state it was in before the animation. This can be frustrating and not always intuitive.
So what you were seeing wasn't that the animation wasn't running (it was), but that by the time you scroll down it had finished animating and put it back to its original state (with opacity set to 0).
So you have two options:
You can remove the opacity from the CSS. Problem is that it might 'flash' before starting the animation. This wouldn't be a problem in your case since the content is below the fold to begin with. But it's bad practice because that might be an issue with future similar implementations.
The other is to leave the element as it appears in the last frame of its CSS animation. This is why I proposed animation-fill-mode: forwards. This does exactly that! I suppose this isn't the default because it might require more memory consumption but I haven't seen any evidence to prove it (not that I've looked for it).
As An Aside
Regardless, nobody will see your animation as it's below the fold. I suggest you detect how far the user has scrolled, and add that animation property once the user has reach the Testimonials. This way, it will only "fadeInLeft" when the user can see it!
You can use this code to do this: http://jsfiddle.net/R2YD9/2/ (Requires jQuery)
I'm using a reasonably simple CSS transition to create a box that 'flips around' by transitioning two divs 180deg at the same time. When you're on the 'back' of the box, it should be slightly transparent so you can see the underside.
I've got this working fairly easily in all browers, except the latest Safari 7 and on iOS 7. On Safari 7, the animation flickers and the back card just 'pops' to the front at the end of the animation.
This seems to be a bug in the rendering of the animation on newer Safari. Is there a workaround to get this to behave better?
Check out gifs of the animation on Chrome and Safari
See a demo here http://cssdeck.com/labs/flippable-card
Can not test on safari, but a similar bug happened time ago in Chrome.
The solution in that case would have been to move the back 1px in z
.card__back {
transform: rotateY(180deg) translateZ(1px);
backface-visibility: hidden;
}
.card--flipped .card__back {
transform: rotateY(0deg) translateZ(1px);
}
This happened in Chrome because while animating, the spatial order was calculated (I mean, the position of elements in 3d space), and it overrides other factors.
Once the animation is over, that calculation system is no longer used.
As I said before; cann't test in Safari, so I can be sure that this is a solution.
So I managed to replicate the behaviour in my current Safari and thought it was quite interesting.
Here's what I've come up with:
http://codepen.io/anon/pen/usGCL
Basically the backside is already turned around through a -webkit-transform: scaleX(-1); right from the start.
That way you don't have to rotate it back to 0deg.
Now instead of flipping front and back, You just flip the whole container by 180deg, leaving the backside appearing "normal" again. Also the z-index has to change in the process, which makes backface-visibility: hidden; redundant. I guess if modified a little you could use even less jQuery of course.
EDIT
Guess Aperçu's answer is also pretty much what you were looking for.
Just for fun though: http://codepen.io/BenMann/pen/DmjHv
And I agree the backface-visibility is definitely causing the problem.
As mentioned in the question, there are two things happening:
1. The animation flickers: this is due to the click delay in mobile browsers. Basically, a click event fires 300ms after physically tabbing the element. You'd want to listen for touchstart which fires immediately on tabbing, but doesn't fire at all on non-touch interfaces (Fastclick is a nice polyfill that removes this click delay in mobile browsers, but doesn't affect non-touch UIs.)
For the sake of this answer, I'm simply going to bind my listener to touchstart instead of click (therefore, the demo is to be viewed on a touch device):
$('.card').on("touchstart", function() {
$(this).toggleClass('card--flipped');
});
2. The back card just 'pops' to the front at the end of the animation: after some experimentation, it seems that this happens when transform and backface-visibility are both defined on the same element. To work around that, I've kept the backface-visibily on .card__back, but put the transform: rotateY(180deg) on .card__front.
Therefore, .card__front is going to be flipped initially, which means that .card has to be initially flipped as well to compensate for that.
We must also define transform-style: preserve-3d on .card in order for the transform to render .card__front and .card__back in 3D space (as opposed to being flattened).
/* Relevant CSS */
.card {
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform: rotateY(-180deg);
}
.card__front {
transform: scaleX(-1);
}
.card__back {
backface-visibility: hidden;
}
.card--flipped {
transform: rotateY(0);
}
Mobile DEMO (to be viewed in mobile Safari or Chrome): http://jsbin.com/aMAwezA/15/
DEMO (for non-touch devices): http://jsbin.com/aMAwezA/16/
EDIT:
After further testing, I found that transform: rotateY(180deg) on .card__front was causing some flickering in Chrome. Replacing it with transform: scaleX(-1) solved the issue. Updated the CSS and demo link above which should work on both mobile Safari and Chrome.
You need to add two transition time, one for the -webkit-backface-visibility and another for -webkit-transform.
If you try to set the transition delay at 0secs, you will see the color change immediatly like you want to.
Try to modify your transition rule like
transition: -webkit-transform 1s ease-in-out, -webkit-backface-visibility 0s ease-in-out;
Or to override the 1sec transition only for the backface-visibility.
EDIT
Without using -webkit-backface-visibility which seems buggy, I think I've got something work playing with the display of the backcard.
See Demo (Tested on Safari 7 iOs 7.0.2 and Mavericks)
So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.
I use 3D rotations, from CSS3,
-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
Solutions anyone?
I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s
It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :
.cube:hover{
-moz-transform: rotateY(-90deg);
-webkit-transform:rotateY(-89.9deg);
transform:rotateY(-90deg);
}
It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.
I'm getting a bug using CSS keyframe animation.
When animating the -webkit-transform property, if I add -webkit-animation-play-state: paused; and then remove it, the animation quickly jumps back to the start and then resumes again.
Here is an example of this in action: http://jsfiddle.net/NAjFf/8/
It even happens when toggling the animation state with javascript: http://jsfiddle.net/NAjFf/7/
Is there a workaround for this issue?
Thanks!
It's a bug issue in webkit, everyone affected by it might be interested in Roman Komarov's technique of tricking WebKit into transitions on pseudos via inheritance.
Checkout the below link
pseudos
:)