Chapter 3: Animations

31 task beta

Let’s take a look at the ABC of creating animations with CSS. 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.

Hello, animation! Task

@keyframes: storyboard Task

@keyframes: from and to Task

@keyframes: frame grouping Task

Complex animation, step 1 Task

Complex animation, step 2 Task

Water adventure Task

Animation play count: animation-iteration-count Task

Animation direction: animation-direction, step 1 Task

Animation direction: animation-direction, step 2 Task

Animation delay: animation-delay, step 1 Task

Animation delay: animation-delay, step 2 Task

Animation delay: animation-delay, step 3 Task

Air journey Task

Pre- and post-animation state: animation-fill-mode, step 1 Task

Pre- and post-animation state: animation-fill-mode, step 2 Task

Pre- and post-animation state: animation-fill-mode, step 3 Task

Pre- and post-animation state: animation-fill-mode, step 4 Task

Pre- and post-animation state: animation-fill-mode, step 5 Task

Launching a factory, step 1 Task

Launching a factory, step 2 Task

Stopping and starting an animation: animation-play-state Task

Animation form, animation-timing-function Task

Animation-timing-function, step 2 Task

Animation-timing-function, step 3 Task

Animation-timing-function, step 4 Task

Rocket to the launch pad, step 1 Task

Rocket to the launch pad, step 2 Task

Landing, step 1 Task

Landing, step 2 Task

Landing, step 3 Task