Untitled

<!DOCTYPE html>
<html>
<head>
<tittle> animation</tittle>
<style>
div {
width : 100px;
height : 100px;
background-color : red;
border-radius : 50px;
position : relative;
 
 animation-name :direction;
 animation-duration :2s;
 animation-iteration-count :infinite;
 animation-timing-function :ease-in;
 }
 .rev{
 animation-direction :reverse;
 }
 .alt{
 animation-direction :alternate;
 }
 .alt-rev{
 animation-direction :alternate-reverse;
 }
 @key frames direction{
 0%{
 left:0;
 }
 100%{
 left:900px;
 }
 }
 </style>
 </head>
 <body>
 <p>animation-direction:reverse</p>
 <div class="rev"></div>
 <p>animation-direction:alternate</p>
 <div class="alt"></div>
 <p>animation-direction:alternate-reverse</p>
 <div class="alt-rev"></div>
 </body>
 </html>
Editor is loading...