Keyframe Animations¶

Keyframes vs Transitions¶

Transitions allows us to animate a single state change. Keyframes allow for much more complex multi-state animations

Website Examples¶

Walking Cat [Link]
Xmas Tree [Link]
Mr. JeelllyFish [Link]
Working Clock [Link]
Jiggle Button [Link]

Keyframe¶

To use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. Each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe. Click [here] for MDN doc on @keyframes.

Note in the code example below, the properties color & font-size are not the most performant and are used for demo only. In practice, you should replace font-size with transition.scale() for better performance (see here).

Syntax¶

/* Define */
@keyframes animationName {
  x%{
    /* put your style here */
  }
}

/* Apply */
selector {
  animation-Name: animationName;
  /* put other properties here */
}

Step 1: Define¶

@keyframes rainbowtext {
  0%{
    color:red;
    font-size: 20px;
  }
  25%{
    color:orange;
  }
  50% {
    color:yellow;
    font-size: 40px;
    transform: translateX(200px);
  }
  75%{
    color: green;
  }

  85%{
    color: blue
  }
  100% {
    color: purple;
    font-size:20px;
  }
}

Step 2: Apply¶

p {
  animation-name: rainbowtext; /* name declared in @keyframe*/
  animation-duration: 3s;
  animation-timing-function: linear; /* like transition */
  animation-delay: 0s;
  animation-iteraton-count: infinite;
}

Properties¶

animation-name
animation-duration
animation-timing-function
animation-delay

animation-iteration-count¶

How many times should it repeat? Click [here] for demo of Jiggle button

animation-iteration-count: 1;

/* Commonly used */
animation-iteration-count: infinite;

animation-direction¶

Allows you to have multiple directional effects on a single element. See demo [here] (note: for the demo to work, comment on line animation-play-state: paused;)

animation-direction: forward;

animation-direction: reverse;

animation-direction: alternate;

animation-fill-mode¶

Specifies how an animation should apply styles before and after the animation. Used this with animation-delay. See demo

animation-fill-mode: forwards;

animation-fill-mode: backwards;

animation-fill-mode: both;

animation-fill-mode: none;

animation-play-state ¶

Specifies whether the animation is running or paused. Usually, you manipulate this property through Javascript. See demo [here]

animation-play-state: paused;

animation-play-state: running;

Exercise: Animated Sun & Sky¶

Starter code: click [here]
Completed code: click [here]

CSS Keyframe Animation Shorthand¶

The order of values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.

The order within each animation definition is also important for distinguishing animation-name values from other keywords.

animation: 3s ease-in 1s 2 reverse both paused slidein;

animation: changecolor 3s linear 1s infinite;

animation: jiggle 4s

Click <a href="https://codepen.io/Colt/pen/XaJWKz?editors=1100" target_blank>[here]</a> for a demo

Exercise: Building an Animated CSS Loading Icon¶

Loading icon is the most common application of CSS keyframes. You can find more examples of loader [here]. Click [here] for the starter code. Click [here] for the completed code.

Tips & Tricks¶

You can assign different colors to the borders of a box (border-top-color border-bottom-color). You can then turn the box into a circle using border.radius.

.loader {
  /* Turn box into circle */
  margin auto;
  border: 16px solid #bdc3c7;
  width: 120px;
  height: 120px;
  border-top-color: #1abc9c
  border-bottom-color: #3498db;
  border-radius: 50%;

  /* Animation shorthand */
  animation: spin 2s linear infinite;
}

/* Animations Definition */
@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

[Link]

Table of Contents