CSS Animations

• Tweening based, using Keyframes.

• Easy to use for simple animations.

• Has good performance even under moderate system load.

• Browsers can optimize the performance as it controls the animation sequence.

• Use Easings well to make them feel great.

Defining CSS Animations

1. Setting Up the Keyframes

• Keyframes are defined using the @keyframes rule.

  @keyframes slidein {
    from {
      translate: 150vw 0;
      scale: 200% 1;
    }
  
    to {
      translate: 0 0;
      scale: 100% 1;
    }
  }
  

• If we need more than two keyframes:

  @keyframes growshrink {
    25%,
    75% {
      scale: 100%;
    }
  
    50% {
      scale: 200%;
      color: magenta;
    }
  }
  

2. Animating Between Keyframes

• We apply the keyframe animation to an element and set its configuration via animation-* CSS properties.

  p {
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  

• There's also a shorthand syntax:

  p {
    animation: 3s infinite alternate slidein;
  }
  

Full list of properties can be found on MDN.