CSS Animations

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!

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