CSS @keyframes

A transition goes from state A to state B when something triggers it. An animation runs by itself, can have many steps, and can repeat.

An animation has two parts:

1. @keyframes describes what happens: the steps.
2. **animation-* properties** on an element say which keyframes to play and how.

1
2
3
4
5
6
7
8
9
10
11
12

<style>
  @keyframes fade-slide {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .box {
    padding: 16px 24px; background: #d94a00; color: #fff; display: inline-block; border-radius: 8px;
    animation-name: fade-slide;
    animation-duration: 1s;
  }
</style>
<div class="box">I fade and slide in when the page loads</div>

Press Run to watch it again.

The @keyframes rule

You choose the name (fade-slide). Inside, from is the start and to the end. For more steps, use percentages:

1
2
3
4
5

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

from is the same as 0% and to is 100%.

Connecting it

animation-name points to the keyframes, and animation-duration is required. Without a duration the default is 0s, so nothing visibly happens.

What can be animated

The same properties as transitions: colors, opacity, transforms, sizes. Prefer transform and opacity for smooth results.

Next: the other animation-* properties: Name and Duration.