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
:)
Related
In this video is a prototype made with Adobe XD.
https://imgur.com/BhQ2X9F
I am trying to reproduce the "Snap" animation used to make that effect soft bounce in css but i cant get it just right.
Here is my attempt: https://jsfiddle.net/etw3qy48/2/
transition: all 0.3s cubic-bezier(0.68, -0.30, 0.265, 1.30);
I need help reproducing the soft bounce animation (AKA "snap" in XD) as seen in the video with css.
Looking at your fiddle and the video, the only real difference I see is that your animation bounces both on start and on end, when you only want it to bounce at the end of the transition. Firefox has a really cool transition cubic-bezier editor, this is what I came up with:
transition: all 0.3s cubic-bezier(.18,.89,.45,1.36);
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 am using the excellent css3 animations "library" provided by http://daneden.me/animate/
There is a slight but noticeable delay of about 1 second, when any of the examples are clicked. In the source it adds the animation-classes to the element and the browser will then execute the css animation statements.
I want the css3 animation to start immediately after clicking. Is there a solution?
You have the property animation-delay, this property wait x seconds, then start the animation.
I see animation-delay: .2s; on #animateTest.
Maybe you have good eyes to see this little time.
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