How to use CSS keyframes to animate elements

Keyframes

@keyframes name {
  from {
    /* property */
  }

  to {
    /* property */
  }
}

That's how simple the keyframes assignment is. We assign an identifying name and inside the curly brackets we indicate a beginning (from) and an end (to) of our animation.

We can also assign percentage values (even multiple values), which allows us to control more precisely the progress of our animation.

@keyframes name {
  0% {
    /* property */
  }

  66% {
    /* property */
  }

  100% {
    /* property */
  }
}

Animation

To associate the registered animation to an element we use the property animation:

.element {
  animation: name 3s infinite;
}

The previous animation will last 3 seconds and will repeat indefinitely. We can also specify each of the properties separately:

animation-name: name;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-delay: 0s;
animation-direction: normal;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: ease;

Documentation on animation and its properties can be found in the CSS3 specification.

Inside animation we also have the steps() function, which will allow us to specify in how many steps our animation will be executed:

.element {
  animation: name 10s steps(10) infinite;
}

In the previous example our animation will last 10 seconds and will have 10 steps or frames, so it will run one step every second and possibly our animation will no longer be as smooth.

Linear animation

<div></div>

@keyframes taadaa { 
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

div {
  background-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: taadaa 2s infinite;
}

With this we get that our animation starts with a transparent object and that, progressively, ends up being opaque. And back to the beginning.

Non-linear animation

The percentage of progress can also be specified cross multiple steps, either by encompassing the steps with repeated properties or separately:

<div></div>

@keyframes bounce { 
  20%, 50%, 80% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

div {
  background-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: bounce 1s infinite;
}

Using this technique we can achieve effects such as bouncing, where an animation changes its rhythm as it progresses.