CSS Animation

This property helps in establishing the animation of the webpage. The animation is created using the @keyframe rule. It helps in managing the middle steps in the CSS animation sequence. Let’s see some of the CSS animation properties.

@keyframe – It helps in specifying the animation.
Animation – It's a shorthand property utilized in setting all other different property leaving the animation-fill-mode property and the animation-play-state property.
Animation-delay – It tells us the starting of an animation.
Animation-direction – It tells whether the animation is going to play in an alternate or reverse cycle.
Animation-duration – It tells the amount of time taken by animation to complete a single cycle.
Animation-fill-mode – It defines the static style of an element.
Animation-iteration-count – It determines the number of times the animation gets played.
Animation-play-state – It tells whether the animation is paused or running.
Animation-name – It tells the name of @keyframes animation.
Animation-timing-function – It determines the curve of the speed of an animation.

CSS Animation to change the color of the background

Learn HTML and CSS in 10 Days

Building Your First Web Page

Getting to Know HTML

Getting to Know CSS

CSS Properties

Opening the Box Model

Positioning Content

Working with Typography

Setting Background And Gradients

Creating Lists

Adding Media

Building Forms

Organizing Data With Tables

Writing Your Best Code

Some more HTML and HTML 5 tags

CSS Animation

Popular Exams

Company

Resources