Animation in CSS
The animation property in CSS can be used to animate many other CSS properties such as color, background, height or width.
Important Announcement – EasyShiksha has now started Online Internship Program “Ab India Sikhega Ghar Se”
CSS animations make it possible to animate transitions from one CSS style configuration to another. 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.
- animation-name: declares the name of the @keyframes at-rule to manipulate.
- animation-duration: the length of time it takes for an animation to complete one cycle.
- animation-timing-function: establishes preset acceleration curves such as ease or linear. It can have the following values ease, ease-in, linear, ease-out, ease-in-out and cubic-bezier(n,n,n,n).
- animation-delay: The animation-delay property specifies a delay for the start of an animation.
- animation-direction: property specifies whether an animation should be played forwards, backward or in alternate cycles. This property has values like normal, reverse, alternative and alternative-reverse.
- animation-iteration-count: the number of times the animation should be performed.
- animation-fill-mode: sets which values are applied before/after the animation.
You can comma-separate the values to declare multiple animations on a selector as well.
Top Software Engineering Courses
Advantages of CSS animations
Empower your team. Lead the industry
Get a subscription to a library of online courses and digital learning tools for your organization with EasyShikshaRequest Now
ALSO READ: importance-of-learning-history