Introduction to CSS Animations

CSS Animations

CSS animations let elements animate automatically without a trigger using @keyframes. They can loop, reverse, and run on page load.

Animations offer more control than transitions — you define the full sequence of states.

Example

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.badge {
  animation: pulse 2s ease-in-out infinite;
}

CSS

Full Editor

Pro Tip

Use animations sparingly — constant motion draws attention away from content and can be distracting.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned