HTML Academy
Pre- and post-animation state: animation-fill-mode, step 2
Animations17/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!
Pre- and post-animation state: animation-fill-mode, step 4
  • Theory
  • Theory

Pre- and post-animation state: animation-fill-mode, step 3

Another value of the animation-fill-mode property is backwards. This value defines the state of an element before the start of an animation.

If an element has an animation assigned to it with a delay and animation-fill-mode: backwards, the styles described in the first keyframe from or 0% will be applied at once, before the animation is played.

Let’s consider a specific example.

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
.energy-logo {
animation-name: vibrate;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
100%
GoalsCompleted 0 out of 2
  1. Assign a power animation with a duration of 2s and a playback delay of 2s to the battery charge .energy-fill,
  2. then make the charge in the experimental battery .mega-energy-fill display its state before the animation starts.

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