CSS — Animations

Overview

CSS animations create smooth motion using keyframes.

What you'll learn

• @keyframes
• animation-duration
• timing functions
• infinite loops

Syntax

@keyframes fade{ from{opacity:0} to{opacity:1} }

Example

@keyframes pop{
  from{ transform:scale(.96); opacity:.2; }
  to{ transform:scale(1); opacity:1; }
}
.box{ animation: pop .25s ease-out; }

Notes

• Keep animations subtle.
• Prefer transform/opacity for performance.

  Try: Open the Playground: /en/playground/html