Frequently Asked Questions
What are CSS @keyframes and how do they work?▼
CSS @keyframes define animation stages at specific percentages from 0% (start) to 100% (end). Each keyframe sets CSS property values, and the browser interpolates smoothly between them. You reference keyframes with the animation-name property and control timing, duration, and repetition with other animation sub-properties.
How do I create a multi-step CSS animation?▼
Add keyframe stops at various percentages inside a @keyframes rule. For example, set different transforms at 0%, 25%, 50%, 75%, and 100% to create a multi-step sequence. The browser handles the transitions between each stop automatically based on the timing function you choose.
What CSS properties can be animated with keyframes?▼
Most CSS properties with numeric or color values can be animated, including transform (translate, rotate, scale, skew), opacity, background-color, border-radius, box-shadow, width, height, and margin. For best performance, stick to transform and opacity since they are GPU-accelerated and avoid triggering layout recalculations.
What is the difference between animation-fill-mode forwards and both?▼
animation-fill-mode: forwards keeps the element in its final keyframe state after the animation ends. animation-fill-mode: both applies the first keyframe styles before the animation starts (during any delay) AND keeps the final keyframe styles after it ends. Use 'both' when you have a delay and want the initial state applied immediately.
How do I make a CSS animation loop infinitely?▼
Set animation-iteration-count: infinite on the element. Pair it with animation-direction: alternate to reverse on each cycle for a ping-pong effect, or use normal to restart from the beginning each time. Make sure your 0% and 100% keyframes match for a seamless loop.