Day 17. CSS Animations

Notes

• Shorthand syntax for CSS animations

/* opt for optional */
.animated-thing {
  animation: $name $duration $timing-function (opt) $animation-delay (opt)
    $iteration-count (opt);
}

• Keyframes syntax

@keyframes black-to-white {
  0% {
    background: #000;
    color: #fff;
  }
  100% {
    background: #fff;
    color: #000;
  }
}

/* or */

@keyframes black-to-white {
  from {
    background: #000;
    color: #fff;
  }
  to {
    background: #fff;
    color: #000;
  }
}

• Multiple animation properties

.animated-thing {
  animation: black-to-white 1s linear 1, black-to-red 2s ease-out infinite 2s;
}

Steps Timing Function

• Animate a CSS property in distinct steps. This involves the steps() animation function. Here’s the syntax

  animation: walk 2s steps(11) infinite;

• The code above takes an animation and splits it into 11 distinct frames. I did a little demo of a walking cat. You can take a look.

animation-fill-mode property

• Specifies how the animation ends. It can be set to backwards (the animation starts at 0% values), forwards (retains 100% value after animation), both (starts at 0% and retains 100% after animation) or none(none).
• animation-play-state controls the state of the animation. It can be set to paused or running. It is set to running by default.
• animation-direction determines the direction of the animation. Values are normal, alternate, reverse, alternate-reverse.