CSS animation Property

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.

Share this: