Animation

Transitions

Animation property

You can use the animation property, along with keyframes, to create custom animations. Animation properties use timing functions, durations, and delays just like transitions. Animations have some additional properties you can set:

Sprite animation

You can use the animation property, the steps timing function, and animating on background position to create animated sprites. Example code:

In this example, frames are 366x366 pixels, and there are 18 frames in the cycle.

.homer {
  margin: 30px;
  background: url("./homer-sprite.jpg") 0 0 no-repeat;
  width: 366px;
  height: 366px;
  animation: woohoo 1000ms steps(18) infinite;
}

@keyframes woohoo {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -6588px;
  }
}

Animation properties vs. transition properties

Animation with JavaScript

You can also create more stateful animations by updating CSS attributes or classes of elements with JavaScript. An example for parallax is Skrollr.

Event listeners for animation

Performance

The fastest properties are opacity and transform

will-change: a property that lets the browser know a property will animate, which can help. (It may kick it over to the GPU). Mostly for Chrome, Edge ignores this. .animated-thing { will-change: transform; }

Don't animate elements that aren't visible.

Animation Resources