استخدام خاصية CSS3 animation-direction و مثال

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

.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%;}
}