css animation

by lemon kazi

HTML

<div class="hello"></div>

CSS

.hello {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  border-radius: 55px
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 4s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
    width: 100px;
    height: 100px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 50px
  }
}