In this section, we will learn what the animation property is and how to use it in CSS.
Click here to run the example of animation property.
CSS animation Property Definition and Usage
The CSS animation property is a shorthand property by which we can import and apply those animations created by @keyframes to an element.
CSS animation Property Syntax
animation: name duration timing-function delay iteration-count direction fill-mode play-state;CSS animation Property Value
-
animation-name: this is where we set the name of the
animation that we want to import. (this is required) -
animation-duration: this is where we declare the duration
of the target animation. (the value is required) -
animation-timing-function: This is where we declare the
speed and movement of the animation. (this value is optional) -
animation–delay: this is where we declare whether
there should be a delay before the animation starts to play or not.
(this is optional) -
animation-iteration-count: Here we declare how many times
the animation should be repeated. -
animation-direction: This is where we declare the
direction of the animation (whether it should start from the end frame
towards the start frame of that animation or vice versa). Also, this
value is optional. -
animaiotn-fill-mode: this is where we declare what type of
style the target element should have before or after the animation
played. This value is optional. -
animation-play-state: After the animation started to play,
we can stop or resume it using this property. This value is
optional.
Example: CSS animation shorthand
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
div{
margin: 2em;
}
li{
display: inline-block;
border:thin solid lightgray;
border-radius: 1em;
margin-left: 0.2em;
padding:0.2em;
animation: padding 3s ease 2s ;
}
@keyframes padding{
from{
background-color:lightcoral;
}to{
background-color:lightskyblue;
}
}
</style>
</head>
<body>
<ul>
<li>Animation Fill Mode is: both</li>
</ul>
</body>
</html>Example: CSS animation property
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin:unset;
box-sizing: border-box;
}
div{
margin: 2em;
}
li{
display: inline-block;
border:thin solid lightgray;
border-radius: 1em;
margin-left: 0.2em;
padding:0.2em;
animation: padding 3s ease 2s 2 both ;
}
@keyframes padding{
from{
background-color:lightcoral;
}to{
background-color:lightskyblue;
}
}
</style>
</head>
<body>
<ul>
<li>Animation Fill Mode is: both</li>
</ul>
</body>
</html>