animation-name and animation-duration

animation-name

Which @keyframes to run. You can run more than one, separated by commas.

animation-duration

How long one cycle takes: 2s, 500ms. A longer duration means a slower animation.

1
2
3
4
5
6
7
8
9

<style>
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(200px); } }
  .track { background: #eee; margin: 8px 0; }
  .dot { width: 30px; height: 30px; background: #1a5276; border-radius: 50%; animation-name: slide; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; }
  .fast { animation-duration: 0.8s; }
  .slow { animation-duration: 3s; background: #d94a00; }
</style>
<div class="track"><div class="dot fast"></div></div>
<div class="track"><div class="dot slow"></div></div>

Both dots run the same keyframes. Only the duration differs.

Several animations on one element

1
2
3
4

.badge {
  animation-name: fade-in, pulse;
  animation-duration: 0.5s, 2s;
}

The first value of each list belongs to the first animation, and so on. If a list is shorter, it repeats.

The animation shorthand

All of the properties in this chapter can be combined:

1
2

animation: slide 2s ease-in-out 0.5s infinite alternate both;
/*         name  duration timing delay iterations direction fill-mode */

The two time values are read in order: duration first, delay second. The other keywords can come in any order, although it is common to follow the pattern above.