<div></div>
@keyframes example{
0%{background:pink;left:0px;top:0px;}
25%{background:pink;left:200px;top:0px;}
50%{background:black;left:200px;top:200px;}
75%{background:pink;left:0px;top:200px;}
100%{background:pink;left:0px;top:-2000px;}
}
div{
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-fill-mode: backwards;
animation-iteration-count: 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.