HTML Academy
Animation direction: animation-direction, step 2
Animations11/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 2
  • Theory
  • Theory

Animation delay: animation-delay, step 1

Apart from controlling the duration of an animation, we can set a delay before it starts playing.

In this and the next two tasks, we will create two animations that will eventually be run one after another using a delay. First, let’s create and assign the first animation.

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
100%
GoalsCompleted 0 out of 2
  1. Create a rotate animation containing one to frame with a 360deg rotation transformation,
  2. then assign this animation to the .arrow-small arrow for the duration of 1s.

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