Notes

Quick intro to CSS Animations

Edit on GitHub

CSS & Sass
2 minutes
 1animation-name: scaleUp; /* the name of the corresponding @keyframes rule */
 2animation-duration: 2s; /* time to complete one animation cycle */
 3animation-delay: 1s; /* when to start */
 4animation-timing-function: 2s; /* defines acceleration curves */
 5animation-iteration-count: 6; /* repeat animation this many times, default is 1, infinite is an option */
 6animation-direction: normal; /* should the animation play forwards, backwards or alternate back and forth?  this will change which keyframe plays first and which plays last */
 7
 8animation-play-state: normal; /* pause and resume the animation - running, paused */
 9
10animation-fill-mode: none; /* choose to set CSS property values based on keyframes before/after an animation is played. default is none - none, forwards, backwards, both */
11
12
13 /* shorthand 
14 animation: name duration;
15 */
16animation: scaleUp 2s; /* shorthand */

To add an animation you need two things, an animation-name property and a keyframes rule

1.el {
2  animation-name: scaleUp;
3}
4
5@keyframes scaleUp {
6  
7}

@keyframes

Each keyframe specifies the values of CSS properties at specific moments of the animation.

The moments can be specified in percentages, e.g. 0% means start, 100% means end. They can also be specified in from and to

1@keyframes scaleUp {
2  0% {
3    transform: scale(0);
4  }
5  
6  100% {
7    transform: scale(1);
8  }
9}

is the same as

1@keyframes scaleUp {
2  from {
3    transform: scale(0);
4  }
5  
6  to {
7    transform: scale(1);
8  }
9}

You can of course define more than two keyframes

 1@keyframes scaleUp {
 2  0%, 70% { /* same animations can be provided as comma separated list */
 3    transform: scale(0);
 4  }
 5
 6  50% {
 7    transform: scale(2);
 8  }  
 9  
10  100% {
11    transform: scale(1);
12  }
13}`****`

When is it triggered

By default an animation is triggered on browser refresh if you applied it a basic element (and not a state). If you want an animation to play when an element is hovered, you’ll add the CSS property to the :hover state

1.el:hover {
2  animation-name: scaleUp;
3  animation-duration: 2s;
4}