CSS Animations and Transitions
Overview
Adding animations with CSS can enhance the user experience by improving aesthetics and branding, providing visual feedback, and making the site feel more engaging through subtle transitions and movements. The key is to apply them in a useful way that does not distract from the purpose and intent of the content.
Prepare
CSS animations are applied using the @keyframes rule and the animation
property. The @keyframes rule defines the animation, while the animation property
applies it to an element. The animation can be applied to any HTML element, including text, images, and other
elements.
CSS Animations are best for more complex, keyframe-based and/or continuous animations.
This example, CSS Animation, uses animation with @keyframes to illustrate some results in a vertical bar chart.
- Review: CSS Animations – WDD 231
CSS transitions are a simpler way to animate elements. They are often triggered by a change in state like JS class changes, or built-in pseudo-classes (:hover). The are defined by a start and end state and you need user interaction or script to trigger the state change.
CSS Transitions are best for one-time state changes. They are a great way to add subtle interaviity and typically occur smoothly over time
These examples, CSS Transition, illustrate some of the more common uses with button hovers, and accordion menus, and fades in/out effects.
Activity Instructions
Start planning on how you will use CSS animations and transitions in your individual, web application project.
Optional Resources
- CSS Animations – w3schools.com
- CSS Transform – MDN
- CSS Transition – MDN