<div class="container">
  <div class="demo">
    <div class="title">ease: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease.png" alt="ease" >
    </div>
  </div>
  <div class="demo">
    <div class="title">linear: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/linear.png" alt="linear">
    </div>
  </div>
    
  <div class="demo">
    <div class="title">ease-in: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-in.png" alt="ease-in">
    </div>
  </div>
  <div class="demo">
    <div class="title">ease-out: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-out.png" alt="ease-out">
    </div>
  </div>
  <div class="demo">
    <div class="title">ease-in-out: </div>
    <div class="content">
      <img src="https://gitee.com/evestorm/various_resources/raw/master/css3/ease-in-out.png" alt="ease-in-out">
    </div>
  </div>
</div>

/* 向右运动的关键帧动画 */
@keyframes moveRight {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

/* 五个预设速度曲线 */
.container .demo:nth-child(1) img {
  animation: moveRight 1s ease alternate infinite;
}
.container .demo:nth-child(2) img {
  animation: moveRight 1s linear alternate infinite;
}
.container .demo:nth-child(3) img {
  animation: moveRight 1s ease-in alternate infinite;
}
.container .demo:nth-child(4) img {
  animation: moveRight 1s ease-out alternate infinite;
}
.container .demo:nth-child(5) img {
  animation: moveRight 1s ease-in-out alternate infinite;
}

/* 初始化 */

.container {
  background-color: #f1f1f1;
  width: 100%;
}

.demo {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: flex-end;
  margin-bottom: 5px;
}

.demo .title {
  flex: 2;
  text-align: right;
  margin-right: 10px;
}
.demo .content {
  flex: 6;
}
.demo .content img {
  width: 80px;
  height: 80px;
  vertical-align: bottom;
}