css-animation-timing

HTML

<div class="circle blue ease"></div>
<div class="circle green linear"></div>
<div class="circle yellow ease-in"></div>
<div class="circle red ease-out"></div>
<div class="circle grey ease-in-out"></div>

CSS

.circle {
  width: 60px;
  height: 60px;
  border-radius: 60%;
  margin: 5px;
  float: left;
  position: relative
}

.blue {
  background: #5daaef
}

.green {
  background: #9ccc65
}

.yellow {
  background: #ffd54f
}

.red {
  background: #ff5722
}

.grey {
  background: #9e9e9e
}

@keyframes falling_circles {
  from {
    top: 0px
  }
  to {
    top: 200px
  }
}


.linear {
  animation: falling_circles 2s linear 5;
}



.ease-out {
  animation: falling_circles 2s ease-out 5;
}