CSS Animations
Offered By: Independent
Course Description
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!
Related Courses
Angular Styling & Animations (for Angular 2+)Udemy CSS Animation With Latest Effects - 2020
Udemy The Ultimate CSS - Best Practise on Animations & Effects
Udemy After Effects Motion Graphics Beast
Udemy CSS Animations: Learn CSS Animations from Scratch
Udemy