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

CSS Animations

via Independent

Go to class Write review

Coursera

Learn AI, Data Science & Business — Earn Certificates That Get You Hired

DataCamp

Power BI Fundamentals - Create visualizations and dashboards from scratch

Overview

Google, IBM & Meta Certificates – 40% Off

One plan covers every Professional Certificate on Coursera.

Unlock All Certificates

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