# Animations

• Just like transitions, animations allow you to gradually or smoothly change one or more properties from one style to another
• Where transitions can only be triggered on state changes (like :hover, :active, :focus, :checked, ...), animations can be used in a wider context
• Every animation consists of two parts:
  • an animation style that describes the duration, timing, direction, ... of the animation
  • a set of keyframes with a start, end and intermediate points that describe the changes itself
• Take a look at one of the oldest animations: the Spiderman example from 2010

# @keyframes

• The @keyframes at-rule contains all the different keyframes (states) of the animation
• Each keyframe contains the properties of an element at a specific moment in time
• Because the actual duration of the animation is determined by the animation properties, the different keyframe selectors (stops or breaking points) within @keyframes are written in percentages
  • 0% (or from): start of the animation
  • 100% (or to): end of the animation
  • 50%: in the middle of the animation
  • ...
• You can omit the 0% keyframe if the start of the animation contains no values

# Quick example

• Let us discuss a simple animation (before we dive into the details of the animation style)
  • The animation on the p tag uses the changeColor at-keyframe rule
  • The animation runs in 4 seconds (4s) and has an infinite loop
• Result: the background color of the p tag changes in 4s from orange to skyblue and then starts over again

p {
    ...
    animation: changeColor 4s infinite;
}
@keyframes changeColor {
    0% {
      background-color: orange;
    }
    100% {
      background-color: skyblue;
    }
}

# Exercises

1. Change 0% to from and 100% to to: nothing changes

@keyframes changeColor {
    from {
      background-color: orange;
    }
    to {
      background-color: skyblue;
    }
}

2. Add a new keyframe at 50% to change the in-between background-color to greenyellow

@keyframes changeColor {
    from {
      background-color: orange;
    }
    50% {
        background-color: greenyellow;
    }
    to {
      background-color: skyblue;
    }
}

3. Add a pause of two seconds in the middle of the animation where the background-color stays greenyellow

@keyframes changeColor {
    from {
      background-color: orange;
    }
    25%, 75% {
        background-color: greenyellow;
    }
    to {
      background-color: skyblue;
    }
}

4. Move background-color: orange; to the p tag and delete the from keyframe

p {
    ...
    animation: changeColor 4s infinite;
    background-color: orange;
}
@keyframes changeColor {
    25%, 75% {
        background-color: greenyellow;
    }
    to {
      background-color: skyblue;
    }
}

# Animation properties

• The animation properties are:

# animation-name

• Sets the name of the @keyframes at-rule(s) to be applied to a specific element
• You can animate an element with two or more @keyframes at-rules by separating the names with a comma
• For example:

div {
  animation: animation1 1s, animation2 2s infinite;
}

# animation-iteration-count

• Theanimation-iteration-count property defines how many times the animation repeats itself
  • The possible values are positive numbers (also .5 for half an animation) or infinite
  • The default value is 1
• In the example below:
  • All balls use the same at-keyframes rule
  • The first ball rolls only once, the second ball rolls two times and the last ball rolls infinitely
    (TIP: Put a return inside the HTML part of the embedded CodePen to reload the page)

div:first-child {
    animation: roll 2s;
}
div:nth-child(2) {
    animation: roll 2s 2;
}
div:nth-child(3) {
    animation: roll 2s infinite;
}
@keyframes roll {
    to { transform: translateX(300px) rotate(360deg); }
}

# animation-direction

• Possible values for animation-direction are:
  • normal: animation runs from 0% to 100%
  • reverse: animation runs from 100% to 0%
  • alternate: animation runs from 0% to 100% and back to 0%
  • alternate-reverse: animation runs from 100% to 0% and back to 100%

div:first-child {
    animation: roll 2s infinite; /* default direction: normal */
}
div:nth-child(2) {
    animation: roll 2s infinite reverse;  
}
div:nth-child(3) {
    animation: roll 2s infinite alternate;
}
div:nth-child(4) {
    animation: roll 2s infinite alternate-reverse;
}
@keyframes roll {
    to { transform: translateX(300px) rotate(360deg); }
}

# animation-fill-mode

• The animation-fill-mode sets which values are applied BEFORE the animation starts and/or AFTER the animation is ended
• To demonstrate this behavior, we start with a black box of 100px wide (the default values)

div {
    background-color: black;
    color: whitesmoke;
    width: 100px;
    padding: .5rem;
    margin-bottom: .5rem;
}

• At the start of the animation, the box is 50% wide and red
• At the end of the animation, the box is 100% wide and blue

@keyframes color {
    from {
        width: 50%;
        background-color: firebrick;
    }
    to {
        width: 100%;
        background-color: dodgerblue;
    }
}

• To make all possible values for animate-fill-mode visible, the animations start with a delay of 2 seconds when you hover the div tags

• Now, hover a div tag and don't move your mouse until the animation ends!

# animation-play-state

• The animation-play-state property sets whether an animation is running (default) or paused
• In the example below:
  • All circles running by default
  • As long as you are hovering a div tag, the animation-play-state is set to paused

div {
    ...
    animation: rotate 1s linear infinite;  /* default animation-play-state is running */
}
div:hover {
    animation-play-state: paused;
}
@keyframes rotate {
    from {
        background-color: coral;
    }
    50% {
        background-color: greenyellow;
    }
    to {
        background-color: coral;
        transform: rotate(360deg);
    }
}

# Examples

# Animated block

• In this example, the animation of the span tag starts after 1.5 seconds. The animation lasts 2 seconds and the span goes forth and back infinitely with animation-timing-function: ease-in-out. Notice the use of animation-fill-mode:both (or backwards) to start the animation correctly.
• The keyframes differ in three ways:
  • The span tag moves from left to right
  • Its shape changes from a circle to a rectangle
  • The color changes from red over orange, yellow and green to blue

# Exercises

1. Remove the object-fit property from the img tag and observe how the animation changes
   • Set theobject-fit property back to none
2. Change the object-position from top left to top right
   • Set the object-position property back to top left
3. Change the opacity inside the keyframes instead of the width

@keyframes grow {
  from {  opacity: 0; }
  to { opacity: 1; }
}
@keyframes shrink {
  from { opacity:1; }
  to { opacity: 0; }
}

# Moving background images

• In the next example, we have a section tag and a div.car

• The section tag:
  • has a width of 80vw and is centred at the middle of the viewport
  • has a repeating background image (800px x 150px)
  • is moved from right to left using the background-position property
  
  
  
  
  
  

   

   

   

  
  
  
  
  

   

  
  
  
  

  section {
      width: 80vw;
      height: 150px;
      position: relative;
      border: 1px solid #000;
      background-image: url(https://itf-web-essentials.netlify.app/assets/landscape.jpg);
      background-repeat: repeat-x;
      animation: moveLandscape 8s linear infinite;
      overflow: hidden;
  }
  @keyframes moveLandscape {
      to {
          background-position: -800px 0;
      }
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  
• div.car:
  • is absolutely positioned inside the section tag
  • has a non-repeating background image (car1.png)
  • is initially placed -150px outside the section by the translateX() property
    (you can't see it because the overflow property of the section is set to hidden)
  • is moved from left to right by the translateX() property
    (the right side is set to 90vw so the car is moving outside the section which has a width of 80vw)
  
  
  
  
  
  
  

   

   

   

  
  
  
  

   

  
  
  
  

  .car {
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 67px;
      height: 30px;
      background-image: url(https://itf-web-essentials.netlify.app/assets/car1.png);
      transform: translateX(-150px);
      animation: moveCar 4s linear infinite;
  }
  @keyframes moveCar {
      to {
          transform: translateX(90vw);
      }
  }
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  

# Pac man

• The animated gif (pacman.gif) runs inside a rectangle box with the following properties:

• All the red values are the default values for translateX(), translateX() or rotate() and can be omitted
• The keyframes at 0% and at 100% can be left out entirely, because they only contain default values
• The optimised result for the keyframes:

@keyframes pacman {
    25% {
        transform: translateX(360px);
    }
    25.01% {
        transform: translateX(360px) rotate(90deg);
    }
    50% {
        transform: translateX(360px) translateY(200px) rotate(90deg);
    }
    50.01% {
        transform: translateX(360px) translateY(200px) rotate(180deg);
    }
    75% {
        transform: translateY(200px) rotate(180deg);
    }
    75.01% {
        transform: translateY(200px) rotate(270deg);
    }
    99.99% {
        transform: rotate(270deg);
    }
}

# Exercise (optional)

• Like in the previous example, let pac man use the full viewport to move around
  • The space between pac man and the browser border is 2rem
  • Pac man has a square box of 38px
  • As such, translateX(360px) and translateY(200px) should be replaced by
    • translateX(calc(100vw - 4rem - 38px))
    • translateY(calc(100vh - 4rem - 38px))

# Advanced examples (optional)

# Moving background images

• Let's retake the basic example with moving background images
• In the middle of the animation the yellow car (car1.png) is switched to a red car (car2.png), riding in the opposite direction

• The keyframe at 0% can be left out entirely, because this only contains the default values
• The optimised result for the keyframes:

@keyframes moveCar1 {
    50% {
        transform: translateX(90vw);
        background-image: url(https://itf-web-essentials.netlify.app/assets/car1.png);
    }
    50.01% {
        transform: translateX(90vw) translateY(-15px) rotateY(180deg);
        background-image: url(https://itf-web-essentials.netlify.app/assets/car2.png);
    }
    to {
        transform: translateX(-150px) translateY(-15px) rotateY(180deg);
        background-image: url(https://itf-web-essentials.netlify.app/assets/car2.png);
    }
}

# Progress bar

• This example is a Bootstrap progress bar clone, built with a repeating background gradient pattern

# Scrolling text

# Animated SVG

• The SVG has a width and height of 100px
• The SVG contains a square box of 80px with a nearly white background and a second square box of 60px with an orangered background
• Let's make an animation of 3 seconds with this SVG

• Step 1: Animate rect#orangeBox
  • the rect#orangeBox starts with a height of 0px
  • After 1.5 seconds (50%), it starts to grow to its full height (60px)
  
  

   

  
  
  

   

   

  
  
  

  #orangeBox {
    animation: increaseHeight 3s linear infinite;
  }
  @keyframes increaseHeight {
    from { height: 0; }
    50%, to { height: 60px; }
  }
  

  1
  2
  3
  4
  5
  6
  7
  
• Step 2: Animate svg#outline
  • Rotate svg#outline by 180deg within 0.5 seconds (17%)
    (The child elements are also rotated!)
  
  

   

  
  
  

   

   

  
  
  

  #outline {
    animation: rotate180deg 3s linear infinite;
  }
  @keyframes rotate180deg {
    form { transform: rotate(0); }
    17%, to { transform: rotate(180deg); }
  }
  

  1
  2
  3
  4
  5
  6
  7
  
• Step 3: Add a delay of 1 second to rect#orangeBox
  
  

   

  
  
  

  #orangeBox {
    animation: increaseHeight 3s linear infinite 1s;
  }
  

  1
  2
  3
  

# Image overlay

• Let's try an animated overlay like we saw in the Photoshop tutorial gettotallyrad.com
  • Because we don't know anything about JavaScript yet, let's do it with a simple hover effect

• Both images (the color image on top) are positioned absolutely inside the figure tag
• It's very important to set the object-fit to none and the object-position to left

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: top left;
}

• When we hover the figure tag, the width of the color image goes from 100% to 0

figure:hover img:last-child {
    animation: shrink 1s both;
}
@keyframes shrink {
    from { width: 100%; }
    to { width: 0; }
}

• To make a smooth transition back when we leave the figure, it's also necessary to make a transition back from 0 to 100%

figure img:last-child {
    animation: grow 1s;
}
@keyframes grow {
    from { width: 0; }
    to {  width: 100%; }
}