Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Independent

CSS Animations

via Independent

Overview

Welcome to our CSS Animation course curious CSS explorer! We will walk the evolution path of a civilization and conquer deep space. We will move, rotate and transform objects while learning the basics of object animation in CSS. For extended theory go to MDN’s docs, for practice go to the first task!

Syllabus

  • 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!

Reviews

Start your review of CSS Animations

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.