HTML Academy
Animation delay: animation-delay, step 1
Animations12/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 delay: animation-delay, step 3
  • Theory
  • Theory

Animation delay: animation-delay, step 2

Let’s prepare a second animation, for which we will set a delay value in the next step.

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
@keyframes rotate {
to {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
100%
GoalsCompleted 0 out of 2
  1. Create an animation ding containing the following keyframes:
    33% with a translateX(-15px) transformation;
    66% with a translateX(15px) transformation.
  2. Then assign this animation to the bell .bell with a duration of 1s.

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