cssadvanced
CSS Animations and Transitions
transition, animation and keyframes
7 questions
By EZ4Code Team
1. What is the main difference between transition and animation?
transition requires a trigger (such as hover) and has only start/end frames; animation can run automatically and supports multiple keyframes
They are completely identical
transition can loop
animation requires JS to trigger
Explanation: transition transitions on property change, requires a trigger and has only start/end states; animation defines multiple frames via @keyframes and can loop automatically.
2. What is the keyword to define keyframes?
@keyframes
@frames
@animation
@transition
Explanation: @keyframes name { from {...} to {...} } or percentages define keyframes, used by the animation property.
3. In transition: all 0.3s ease, what is ease?
A timing function
Duration
Delay
Property name
Explanation: transition shorthand order: property duration timing-function delay; ease is a timing function (default), also can use linear/ease-in etc.
4. What does animation-iteration-count: infinite mean?
The animation loops infinitely
Plays once
Does not play
Plays in reverse
Explanation: infinite makes the animation loop infinitely; can also be set to a specific number, such as 3.
5. What does transform: translateX(100px) do?
Translates 100px along the X axis (without affecting document flow)
Scales up by 100px
Rotates 100 degrees
Skews
Explanation: translateX(100px) translates 100px horizontally; transform does not trigger layout reflow, performing better than top/left.
6. What does the will-change property do?
Hints the browser that a property is about to change, optimizing in advance (such as enabling GPU compositing layer)
Declares an animation
Sets a transition
Disables animation
Explanation: will-change tells the browser which properties will change, so the browser can optimize in advance (such as promoting to a compositing layer), but should be used as needed to avoid resource waste.
7. What is the recommended practice for animation performance optimization?
Prefer using transform and opacity (do not trigger reflow or repaint)
Animate width/height/top/left
Frequently modify DOM structure
Use lots of box-shadow animation
Explanation: transform/opacity only trigger compositing, not layout/paint, with the best performance; avoid animating width/height/top/left and other properties that trigger reflow.