The CSS animation property is a shorthand property for:
animation-name property
animation-duration property
animation-timing-function property
animation-delay property
animation-iteration-count property
animation-direction property
animation-fill-mode property
animation-play-state property
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background: #2a9d8f;
position: relative;
animation: move 4s infinite;
}
@keyframes move {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>Move an element from 0px to 250px left. The animation lasts for 4 seconds. It then starts over again, and go on forever (infinite):
Output:
Syntax:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;animation-name – defines the name of the keyframe you want to bind to the selector.
animation-duration – defines how many seconds or milliseconds an animation takes to complete.
animation-timing-function – defines the speed curve of the animation.
animation-delay – defines a delay before the animation will start.
animation-iteration-count – defines how many times an animation should be played.
animation-direction – defines whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode – defines what values are applied by the animation outside the time it is executing.
animation-play-state -defines whether the animation is running or paused.
Read also:
