CSS animations tutorial

Learning goals

• Be able to create simple CSS transforms

Prerequisites

• CSS tutorial

Level and target population

• Beginners

Teaching materials

• Are available through code pen (see below)

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Introduction

The CSS animations specification “describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.” (CSS Animations Level 1, W3C Working Draft, 30 November 2017).

Keyframes define different values for a single CSS attribute, e.g. background, left, top, width. The computer then will fill in all the values in between during the time of the animation.

Simple example defing what will happen to a div with class="ani".

CSS:

div.ani {
    animation: mykeyframes 5s;
}

@keyframes mykeyframes {
    from {background: blue;}
    to {background: red;}
}

Examples

Simple color animation

Source: The CSS suite from the CSS consortium. The code below and in CodePen has been slightly altered.

http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-keyframes-001.htm

Codepen (for play and copy/paste): https://codepen.io/danielkschneider/pen/KoBWpV

CSS:

  div.coloranim {
    animation-name: sample;
    animation-duration: 10s;
    background-color: blue;
    height: 100px;
    width: 100px;
  }

  @keyframes sample {
    from {     background-color: blue;    }
    30% {      background-color: green;    }
    65% {      background-color: yellow;    }
    to {       background-color: blue;    }
  }

HTML:

  <p>
   There is a filled blue square with 'Filler Text' when the page loads.
   Color of the square gradully changes in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.

  Try to add another keyframe for another color. Make the animation slower, then faster.
  </p>
  <div id="coloranim">I argue for a change<br>Now</div>

Simple moving animation

• Original (slightly changed): http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-keyframes-003.htm

• Playground: https://codepen.io/danielkschneider/pen/dmjvOg

CSS:

div {
  animation-name: anim_1;
  animation-duration: 10s;

  background-color: lightgreen;
  height: 50px;
  width: 200px;
  position: relative;
}

@keyframes anim_1 {
  from {
    left: 250px;
    animation-timing-function: linear;
  }
  50% {
    left: 75px;
    animation-timing-function: linear;
  }
  to {
    left: 0px;
  }
}

HTML:

<p>
Rectangle crawls from right to left with constant speed. 
Try to make it move down at the same time. E.g. use CSS <code>top</code> attribute.
</p>
<div>Such a nice day for crawling</div>

Moving with easing in and out

• Original (slightly changed): http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-timing-function-004.htm

• Playground: https://codepen.io/danielkschneider/pen/yKqMZz

CSS:

div#move-ease-1 {
  animation-name: sample;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  border-radius: 30px;
  padding: 20px 10px 10px 10px;
  background-color: pink;
  height: 60px;
  width: 100px;
  position: relative;
}

@keyframes sample {
  from {
    left: 5px;
  }
  to {
    left: 500px;
  }
}

HTML:

<p>
  Square starts moving from left to right; initially the animation starts slow, gains acceleration in the middle and again slows down at the end.
</p>
<div id="move-ease-1">Let us ease in and out</div>

The default easing function can be changed but before doing so try cubic-bezier values.

Rotation

• Original: DKS

• Playground: https://codepen.io/danielkschneider/pen/oqMWbK

CSS:

div#turn {
  animation-name: spin_1;
  animation-duration: 5s;
  animation-iteration-count: 5;
  #  animation-iteration-count: infinite;
  border-radius: 30px;
  padding: 20px 10px 10px 10px;
  margin: 10px 10px 20px 10px;
  background-color: pink;
  height: 20px;
  width: 100px;
  position: relative;
  left: 100px;
}

@keyframes spin_1 {
  0% {
    transform: rotate(0deg);
  }
  # setting 50% to 90 makes it irregular 50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML:

<p>
  Square will spin
</p>
<div id="turn">Let us spin</div>
<div id="turn">Let us spin</div>

Animating more attributes in the same keyframes

• Original: DKS

• Playground: https://codepen.io/danielkschneider/pen/eMjWxa

CSS:

div.turn {
  animation-name: spin_1;
  animation-duration: 5s;
  animation-iteration-count: 5;
  #  animation-iteration-count: infinite;
  border-radius: 30px;
  padding: 10px 10px 10px 10px;
  margin: 20px 10px 20px 10px;
  background-color: pink;
  height: 20px;
  width: 100px;
  position: relative;
  left: -100px;
}

@keyframes spin_1 {
  0% {
    transform: rotate(0deg);
    left: -100px;
  }
 50% {
    transform: rotate(180deg);
    left: 300px;
    background-color: red;
  }
  100% {
    transform: rotate(360deg);
    left: 600px;
    background-color: blue;
  }
}

HTML:

<p>
  Square will spin and walk
</p>
<div class="turn">Let us spin</div>
<div class="turn">Let us spin</div>

Template

• Original (slightly changed):

• Playground:

CSS:

HTML:

Links

Official

• CSS Animations Level 1 W3C Working Draft, 30 November 2017 (as of April 2018)
• HTML5 test suite

Other

• Using CSS animations (MDN)

• A nice table with many animations: http://leaverou.github.io/animatable/

• http://cssanimate.com

• CSS Animations (W3C Schools)
  • CSS animation-timing-function Property
  • CSS @keyframes Rule