1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style>
6 div{
7 width: 100px;
8 height: 100px;
9 position: relative;
10 animation: firstdiv 2s linear 1s infinite alternate;
11 }
12 @keyframes firstdiv{
13 0%{top:0;left:0;background-color: greenyellow;}
14 25%{top:0;left:100px;background-color: green;}
15 50%{top:100px;left:100px;background-color: yellow;}
16 75%{top:100px;left:0;background-color: gold;}
17 100%{top:0;left:0;background-color: greenyellow;}
18
19 }
20 </style>
21 </head>
22 <body>
23 <div></div>
24 </body>
25 </html>
