div {
  -webkit-animation-name: move;
          animation-name: move;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

div:nth-of-type(1) {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
div:nth-of-type(2) {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
div:nth-of-type(3) {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
div:nth-of-type(4) {
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
div:nth-of-type(5) {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
div:nth-of-type(6) {
  -webkit-animation-timing-function: cubic-bezier(.15,.5,1,0);
          animation-timing-function: cubic-bezier(.15,.5,1,0);
}
div:nth-of-type(7) {
  -webkit-animation-timing-function: steps(10);
          animation-timing-function: steps(10);
}

@-webkit-keyframes move {
  0%, 10% {
    -webkit-transform: translateX(-40vw);
            transform: translateX(-40vw);
  }
  90%, 100% {
    -webkit-transform: translateX(40vw);
            transform: translateX(40vw);
  }
}

@keyframes move {
  0%, 10% {
    -webkit-transform: translateX(-40vw);
            transform: translateX(-40vw);
  }
  90%, 100% {
    -webkit-transform: translateX(40vw);
            transform: translateX(40vw);
  }
}