W3.CSSLesson 44Free preview

W3.CSS Animations

This lesson is part of W3.CSS · All levels

Summary

W3.CSS provides ready-to-use animation classes such as .w3-animate-top, .w3-animate-left, and .w3-animate-zoom. Animation runs when an element is displayed, for example when a class .w3-show is added to the panel. For more unique movements, you can still create your own animations using the @keyframes rule in CSS.

Key points

Popular animation classes: w3-animate-top, left, right, bottom, zoom, opacity, fading
Animation works when the elements are displayed, not continuously
Combine with .w3-show to animate the panel or capital
Custom animations are created with @keyframes and then activated by animation
Keep the duration short so that users do not wait long

Full lesson

Code examples and quizzes

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