#item1 {
  width: 40px;
  height: 40px;
  background-color: #FFA310;
  animation: move 5s;
  /*speeds up first, then slows down*/
  animation-timing-function: ease;
}

#item2 {
  width: 40px;
  height: 40px;
  background-color: #10FF14;
  animation: move 5s;
  /*constant speed*/
  animation-timing-function: linear;
}

#item3 {
  width: 40px;
  height: 40px;
  background-color: #1064FF;
  animation: move 5s;
  /*starts slow, then speeds up*/
  animation-timing-function: ease-in;
}

#item4 {
  width: 40px;
  height: 40px;
  background-color: #C73447;
  animation: move 5s;
  /*starts fast, then slows down*/
  animation-timing-function: ease-out;
}

@keyframes move {
  0% { left: 0;}
  100% { left: 250px;}
}

div {
  margin-top: 30px;
  position: relative;
}