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.
Related
I'd like to know what perf differences to expect from css animation (keyframes) vs css transition.
In my testing it seems there are situations where transition performs far better than keyframes. This article also suggests the same but it's from 2015 so thought it might be outdated https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition
Looking at MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
it states "In terms of performance, there is no difference between implementing an animation with CSS transitions or animations. Both of them are classified under the same CSS-based umbrella in this article."
So I'm surprised to see such as difference in testing. Maybe they're the same on firefox, but using Chrome I definitely see a difference.
I've made some tests on codesandbox to show animation jank with keyframes vs transition. Some important factors here:
1. I'm animating both transform and border-radius. I know you "shouldn't" animate border-radius, but this is part of the test.
2. When I combined the 2 tests into a SPA and toggled between them they both performed well, so it may be to do with page load.
To view the test in all its jankiness select 'mid-tier mobile' using chrome dev tools.
Janky css animation
https://codesandbox.io/s/perf-test-css-animation-nl6xs
Smooth css transition
https://codesandbox.io/s/perf-test-css-transition-fgd7w
Any help with this would be appreciated. I'm sure we can't fix it, but would like to know why keyframes sometimes has poor performance compared to transition.
Thanks!
Both seem like they should be pretty efficient animations as they are only composite changes (as they animate on scale which is efficient):
https://csstriggers.com/transform
I think the issue might be the fact that your test is not a "fair" comparison.
css animation (keyframes): This animation occurs straight away on the client browser. Also it's executing some more emotion code for keyframes.
css transition: This animations happens when React has completed its mount (as its done on a useEffect hook) and doesnt execute a keyframes function.
So the first css animation (keyframes) test might be effected by React taking precious resources away from the browser animation while it completes its lifecycle events.
Also the extra emotion keyframes call could slow it down - it makes another css call https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js#L11 so effectively you're calling css twice with the keyframes test.
Might be better to make a comparison in plain HTML + CSS so React or JS don't get in the way and give you false impression one is better than the other
Where is technical difference between CSS Transition and CSS Animation?
Is animation (with keyframes) consists of several transitions?
Is keyframes support the only difference?
Are both of them are hardware accelerated?
Are both of them are hardware accelerated?
-- Yes, both are hardware accelerated.
for other question answer you have to refer this site
https://cssanimation.rocks/transition-vs-animation/
Transition:
A transition is performed between two distinct states: A start state and an end state. Transitions also need a triggering event such as hover, focus and etc. Transitions are mostly used for simple animations.
Animation:
Unlike transitions, animations can be used for endless animations and have more than two states (#keyframes). They also have no boundaries.
Both use CPU acceleration for smoother effects.
This is a very general question, so I have not provided a code.
I was trying out various CSS animations yesterday, however, I was unable to control any of them using the :hover pseudo element in CSS. I basically wan't to slow the animation when a user brings his/her mouse onto the division.
Pure CSS solution will be appreciated. :) thanks in advance.
There is no "comon way" to do this. You will need to find some workarounds.
The most common workaround to slow a CSS animation down on hover is to apply the same animation on the element and it's parent and pause one on hover with the animation-play-state: paused;. (or the other way around with animation-play-state: running;)
EXAMPLE (comes from this answer : Change the Animation speed on hover)
As you can imagin this can't work for all animations and you will need to be creative in each situation to find a solution for this.
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
:)
I am developing an app using PhoneGap and jQuery, and am a little confused about animations.
I decided to go with what I already knew, which was jQuery animate, and this worked great, except I came across people talking about hardware acceleration.
All I am doing is animating a div to move right on page load:
$("#"+that).find('.captionShine img').animate({left: '550'},700);
I found a plugin called jQuery-Animate-Enhanced which turns these animations into CSS3 transitions, therefore hardware accelerating them (I believe).
So I looked more into the CSS3 animations, and am confused as to the difference between transitions and animations in CSS3. Can I still use hardware accleeration on the CSS3 animations? Or can it only be done on transform: translate3d(0,0,0);?
Is it just a case of assing translate3D to any element I want to have hardware accelerated?
kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm
Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.
Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.
Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.
As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.