CSS Animations Cheatsheet
NewReference for CSS transitions, keyframe animations, timing functions, and common patterns.
Frequently Asked Questions
Does this cover both transitions and `@keyframes` animations?
Yes. The categories split Transitions and Keyframe Animations, so it works for both quick hover effects and multi-step motion.
Can I look up easing, delays, and repeat counts without digging through docs?
Yes. Timing Functions and the animation cards include the pieces people usually forget, such as delays, duration, timing curves, and repeat count.
Is there anything here about animation performance, or only syntax?
There is a dedicated Performance Tips category. That makes it more useful than a plain property list when you are deciding whether to animate transform/opacity versus layout-affecting properties.
What does the full syntax toggle buy me on an animation reference?
Short mode is good for scanning properties like `animation-delay`, while full mode shows the fuller declaration or snippet so you can copy a more complete pattern when needed.
Will this preview the animation in the browser?
No. This cheatsheet only renders searchable cards and copy buttons; it does not play or scrub animations.