CSS Animations and Transitions
Overview
A CSS animation allows developers to create animations on your website without using JavaScript. CSS
animations are
efficient and can be used to create simple animations such as changing the color of a button when hovered over or
more complex animations such as a loading spinner. In this activity, you will learn how to create CSS effects and
how to use them on your website.
A CSS transition is a simpler way to animate elements on a webpage. They are used to change property
values over a
specific duration.
"Animations consist of two components, a style describing the CSS animation and a set of @keyframes
that indicate
the start and end states of the animation's style, as well as possible intermediate waypoints." - MDN
Any visual effect should have a clear purpose and developers must consider accessibility best practices, such as ensuring animations can be paused or disabled for users who may experience motion sensitivity or have cognitive disabilities.
Prepare
- Reference: Using CSS animations - MDN
- Watch: CSS Animation in 100 Seconds - Fireship
- Watch: I Will Never write CSS Animations Again Without Using This Tool - Web Dev Simplified
Advantages of using CSS for Animations
- Performance: Leverages the browsers's hardware accelerations creating smoother animations and better performance.
- Ease of Use: Relatively easy to implement.
- Flexibility: Used to create a wide variety of animations.
- Browser Compatibility: Well-supported and easily degrade on older browsers, hopefully not breaking the user experience.
- Accessibility: Provides visual clues and feedback to users.
Activity Instructions
Implement CSS animations to enhance the visual appeal and user experience on your course home page.
- Choose an element on your course home page to animate.
- Decide on the animation effect you want to use.
- Implement the animation using CSS.
Test and Share
Test your updates and share your work with your peers on Microsoft Teams.