CSS @keyframes Rules

@keyframes

The @keyframes rule defines the animation sequence. Use percentage values (0% to 100%) or from / to keywords to set styles at each point.

Example

/* Using from/to */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Using percentage steps */
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-30px); }
  60%  { transform: translateY(-15px); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

CSS

Full Editor

Pro Tip

from is equivalent to 0% and to is equivalent to 100% — use whichever reads more clearly in context.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned