CSS animations

A quick overview of CSS animation and keyframe properties.

Go fullscreen: ⌃⌥F

CSS animations

Animations

Complex keyframe-based animations that can autoplay

  • Combination of two things:
    1. @keyframes block
    2. animation property

@keyframes

  • Defines each change to CSS properties over time
  • Multiple different keyframes for every animation
  • Defined in percentages—allowing the animation time-length to be variable
CSS 
@keyframes rainbow-y-fade-y-thing-y {

  0% {
    background-color: red;
  }

  50% {
    background-color: orange;
  }

  100% {
    background-color: yellow;
  }

}

animation

  • Connects a specific set of @keyframes to an element
  • Controls how the keyframes are played: time, direction, iterations, etc.
CSS 
.box {
  animation: rainbow-y-fade-y-thing-y 2s linear;
}
HTML 
<div class="purple"></div>
CSS 
.purple {
  transform-origin: right bottom;
  animation: spin 1s infinite alternate;
}
@keyframes spin {
  /* Markbot won’t like this spacing; */
  /* it’s compressed to fit on the screen */
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
A flow-chart denoting when to pick `animation` & when to pick `transition`

Videos & tutorials

Start

CSS animations

A quick overview of CSS animation and keyframe properties.