HTML Academy
Landing, step 3
Animations32/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!
  • Theory
  • Theory

Keep exploring!

Now that you’ve explored CSS Animations and even deep space there’s only one thing left to do… To keep exploring HTML, CSS, and JavaScript even further! That’s why we have the very last challenge for you: if you want to be the first to know when we launch another course, please subscribe and we’ll let you know.

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
body {
padding: 20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
100%
GoalsCompleted 0 out of 1
  1. Enter your email and submit form.

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