animation

by Bharathi Prasannaa

HTML

<body>
<div class="div1">

</div>
</body>

CSS

.div1{
  width:150px;
  height:150px;
  border:1px solid black;
  background-color:blue;
  animation-name:bjp;
  animation-duration:4s;
  animation-iteration-count: 2;
  position:relative;
 
}
@keyframes bjp
{
  0%{
  background-color:red;
  top:0;
  left:0;
  transform:scale(1.5);
  }
  25%{
  background-color:green;
  top:50px;
  left:50px;
  transform:rotate(50deg);
  }
  50%{
  background-color:green;
  top:100px;
  left:100px;
  transform:skew(50deg);
  }
  75%{
  background-color:green;
  top:50px;
  left:50px;
  transform:translate(200px);
  }
  100%{
  background-color:green;
  top:0;
  left:0;
  }
}