HTML Academy
Stopping and starting an animation: animation-play-state
Animations23/32
  • Hello, animation!
  • @keyframes: storyboard
  • @keyframes: from and to
  • @keyframes: frame grouping
  • Complex animation, step 1
  • Complex animation, step 2
  • Water adventure
  • Animation play count: animation-iteration-count
  • Animation direction: animation-direction, step 1
  • Animation direction: animation-direction, step 2
  • Animation delay: animation-delay, step 1
  • Animation delay: animation-delay, step 2
  • Animation delay: animation-delay, step 3
  • Air journey
  • Pre- and post-animation state: animation-fill-mode, step 1
  • Pre- and post-animation state: animation-fill-mode, step 2
  • Pre- and post-animation state: animation-fill-mode, step 3
  • Pre- and post-animation state: animation-fill-mode, step 4
  • Pre- and post-animation state: animation-fill-mode, step 5
  • Launching a factory, step 1
  • Launching a factory, step 2
  • Stopping and starting an animation: animation-play-state
  • Animation form, animation-timing-function
  • Animation-timing-function, step 2
  • Animation-timing-function, step 3
  • Animation-timing-function, step 4
  • Rocket to the launch pad, step 1
  • Rocket to the launch pad, step 2
  • Landing, step 1
  • Landing, step 2
  • Landing, step 3
  • Keep exploring!
Animation-timing-function, step 2
  • Theory
  • Theory

Animation form, animation-timing-function

Finally, the most important property is animation-timing-function. It defines how an animation will be played: at what speed and with what acceleration its properties will change.

In the previous examples, animations were played with identical dynamics: we only changed their durations, but not their «form». By default, this «form» corresponds to the first graph, which shows that the animation starts slowly then accelerates towards the end and slows down again closer to the end.

That’s how the ease value of the animation-timing-function property works.

  • ease

    ease

  • linear

    linear

However, we can make the animation’s playback uniform, without acceleration or deceleration. To do this, use the linear value. As you can see in the second graph, the animation will be played at a constant speed.

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
.robot {
animation-name: move;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
100%
GoalsCompleted 0 out of 1
  1. Set the linear animation type to both .robot robots.

Сookies ∙ Personal Data ∙ Made with ❤︎ in HTML Academy