Animation in CSS

Today we are going to discuss animation in CSS and incoming next blogs, I will discuss animation in JavaScript and Bootstrap.

To learn about the Animation course CSS, HTML, Multimedia you can visit Easyshiksha for Certification

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.

CSS allows animation of HTML elements without using JavaScript or Flash! Each animation needs to be defined with the @keyframes which is called with animation property. Sub Propriety of @keyframes are:

• 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.

Online Certification

Online Test Series

Career Helper

EasyShiksha TV

Top Courses in Software Engineering

Become a Software Tester

More Courses With Certification

Advantages of CSS animations 

They’re easy to use for simple animations; no need for javascript.

The animations run well, even under a moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.

I hope you like Animation in CSS for similar blogs to visit Easyshiksha and Hawkscode.