CSS Animations

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
2016-10-18
Updated:
2016-10-18
Tags:
css animation Fundamentals
More abusable than transitions. Not as robust as transitions – the state won't change at all as opposed to transition, where the state does change but without the animation. 

Syntax: 
  .animated-thing {
  animation: black-to-white 1s linear 1;
}

@keyframes black-to-white {
  0% { background: #000; }
  100% { background: #fff; }
}
The last number on line#2 (​1​) is how many times you want the animation to run. 
  .animated-thing {
 animation:
  $name
  $duration
  $timing-function (optional)
  $animation-delay (optional)
  $iteration-count (optional); 
}

Long form animation properties

  • ​animation-name​: The name of the keyframe block you want to use 
  • ​animation-duration​: how long it will take from 0% to 100%
  • ​animation-iteration-count​: the number of times you want to from 0% to 100%. you can use ​infinite​ 
  • animation-timing-function​: same as for transitions
  • ​animation-delay​: same
Keyframes:
  @keyframes black-to-white {
  0% {
    background: #000;
    color: #fff;
  }
  100% {
    background: #fff;
    color: #000;
  }
}
or use ​from​ and ​to​
  @keyframes black-to-white {
  from {
    background: #000;
    color: #fff;
  }
  to {
    background: #fff;
    color: #000;
  }
}
with percentages you can do for example:
  @keyframes black-to-white {
  0%, 100% {
    background: #000;
    color: #fff;
  }
  50% {
    background: #fff;
    color: #000;
  }
}
Multiple animations
  .animated-thing {
  animation: 
  black-to-white 1s linear 1,
  black-to-red 2s ease-out infinite 2s;
}