HTML & CSS EnhancementsLesson 31Free preview

Animations

This lesson is part of Intro to HTML & CSS · All levels

Summary

CSS animation allows for gradual changes through the @keyframes block that run repeatedly according to configuration. Unlike transitions, animations can run automatically without changing the trigger from the user. You study the properties of animation like name, duration, repetition, and direction.

Key points

@keyframes defines the animation stage in percentages 0% to 100%
Animation-name refers to the block of keyframes used by the element
Other properties: duration, timing-function, iteration-count, direction, fill-mode

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.