CSS animations allow elements to transition between different CSS property values over time, using @keyframes to define the animation sequence. They can change colors, positions, sizes, and more without any JavaScript.
The @keyframes rule defines what happens at specific moments during the animation. Use percentages (0% to 100%) or keywords (from/to) to specify when style changes occur. Example: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
animation-name - the @keyframes name to use. animation-duration - how long the animation runs (e.g., "2s"). animation-timing-function - speed curve (ease, linear, ease-in-out). animation-delay - delay before starting. animation-iteration-count - how many times it plays (use "infinite" for looping). animation-direction - normal, reverse, alternate.
Transforms work perfectly with animations. Use transform: translate() for movement, scale() for resizing, rotate() for rotation, and skew() for tilting. Combine multiple transforms: transform: translateX(100px) rotate(45deg) scale(1.2);
Hover effects are the most common use of CSS animations. Change background color, add shadow, scale up, or rotate elements when users hover over them. Use transition for simple hover effects and @keyframes for complex sequences.
Use transform and opacity properties for animations — they trigger only compositing, not layout or paint. Avoid animating width, height, or margin. Use will-change: transform for elements you plan to animate. Test on mobile devices.