What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the
@keyframes rule, the animation will gradually change from the current style to the new style at certain times.To get an animation to work, you must bind the animation to an element.
In the example above, the animation name is "myanimation" and the animation duration is 3 seconds.
We have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By using percent, you can add as many style changes as you like:
The example above will change the element when the animation is 25% complete, 50% complete, 75% complete, and again when the animation is 100% complete.
Previous Section
6.5 TransitionsNext Section
6.7 QuizCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.