In this lesson, students will learn:
- How to animate from one set of properties to another set of properties with the
@keyframes is composed of:
- Name of the animation: A name that describes the animation, for example,.
- Stages of the animation: Each stage of the animation is represented as a percentage.
0%represents the beginning state of the animation.
100%represents the ending state of the animation. Multiple intermediate states can be added in between.
- CSS Properties: The CSS properties defined for each stage of the animation timeline.
Transitions & Animations
The Guide To CSS Animation: Principles and Examples
Understanding CSS3 Transitions
CSS Cubic-Bezier Builder
Using CSS Animations
CSS Tricks Animation
CSS Animation for Beginners