CSS3 animation-Usage and examples of direction attribute

CSS animation-The direction attribute specifies whether the animation should play in reverse in an alternating loop.

The following table summarizes the usage context and version history of this attribute.

animation-Syntax of using direction

The syntax of this attribute is as follows:

animation-direction: normal | reverse | alternate | alternate-reverse　|　initial　|　inherit

The following example demonstrates how to use animation-direction attribute.

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　4s;
　　　　-webkit-animation-iteration-count:　2;
　　　　-webkit-animation-direction:　alternate;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　4s;
　　　　animation-iteration-count:　2;
　　　　animation-direction:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Attribute value

The following table describes the values of this attribute.

Browser compatibility

animation-Browser compatibility of the direction attribute, all major browsers support this attribute.

Further reading

Please refer to the following tutorials:CSS3Animation.

Related attributes and rules:animation,animation-name,animation-delay,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.