使用animation来实现动画，@keyframes来定义元素的运动规律
(1) animation-name: 动画的名称，即@keyframes定义的动画名字（必写）
(2) animation-duration: 动画的执行时间，一个动画多久执行完成（必写）
(3) animation-timing-function: 动画的速度曲线，默认ease(逐渐变慢)，还有这些选项
    linear 匀速
    ease-in 加速
    ease-in-out 先加速后减速
    ease-out 减速
(4) animation-delay: 动画执行的延迟时间，默认0s
(5) animation-iteration-count: 动画的执行次数，默认为1，还可以选 infinite代表无限次
(6) animation-direction: 规定动画在下一周期是否逆向播放，默认 normal 不逆向播放，还可以选alternate 逆向播放
比如一个盒子从左走到右，如果执行次数是1，执行完成盒子就会立刻从右边弹回到最左边，如果设置了alternate逆向播放，那么盒子就会按照设定的速度曲线经过动画再回到左边
(7) animation-fill-mode: 规定动画的结束状态，默认backwards 回到起始状态，还可以选 保持状态 forwards
设置了之后，animation-direction就不生效了
(8) animation-play-state: 设置动画的运行状态，默认 running 运行，还可以选 paused 停止
// 这么多的属性可以合并在一起写，并不是每一个都需要写，如果使用默认项，就可以省略，animation-play-state没有合并写法
animation: name duration timing-function delay iteration-count direction fill-mode

// 规定每个时间的位移
@keyframes move {
  0%{
     transform: translateX(0px)
  }

  100%{
     transform: translateX(1000px);
  }
}

.box {
   margin-top: 20px;
   width: 100px;
   height: 80px;
   background-color: brown;
   animation-name: move;     // 动画名称
   animation-duration: 6s;   // 动画执行时间 
   animation-timing-function: ease;  // 动画速度曲线,分别为ease、ease-in、ease-in-out、ease-out
   animation-delay: 1s;      // 动画延迟1s执行
   animation-fill-mode: forwards;  // 执行完成后保持状态
}

.bear {
   position: absolute;
   left: 0;
   width: 200px;
   height: 200px;
   background: url(./media/bear.png) no-repeat;
   animation: run 1s steps(8) 7s infinite, move 3s linear 7s forwards;
}

@keyframes run {
   100% {
      background-position: -1600px 0;
   }
}

@keyframes move {
   100% {
      left: 50%;
      transform: translate(-50%)
   }
}

// html代码
<div class="box">
  <div class="top">hello</div>
  <div class="bottom">world</div>
</div>

// css代码
body {
   perspective: 500px;
}

.box {
   position: relative;
   margin: 100px auto;
   width: 100px;
   height: 40px;
   transform-style: preserve-3d;
   transition: transform 1s;
}

.box:hover {
   transform: rotateX(90deg)
}

.box div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   color: #fff;
   line-height: 40px;
   background-color: rosybrown;
}

.box .bottom {
   transform: translateY(20px) rotateX(-90deg)
}

.box .top {
   background-color: sandybrown;
   transform: translateZ(20px)
}

// html代码 

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

// css代码
body {     
      /* 设置透视的距离 */
   perspective: 1400px;
}

section {
   position: relative;
   width: 300px;
   height: 200px;
   margin: 100px auto;
   background: url(./media/pig.jpg) no-repeat;  
   transform-style: preserve-3d;
   animation: rotateDog 10s linear infinite;
}

section:hover {
   /* 当鼠标滑过 动画状态为paused停止 */
   animation-play-state: paused;
}

section div {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: url(./media/dog.jpg) no-repeat;     
}

@keyframes rotateDog {
    0% {
      transform: rotateY(0);
    }

    100%{
      transform: rotateY(360deg);
    }
}

section div:nth-child(1){
   transform: translateZ(300px)
}

section div:nth-child(2){
   transform: rotateY(60deg) translateZ(300px)
}

section div:nth-child(3){
   transform: rotateY(120deg) translateZ(300px)
}

section div:nth-child(4){
   transform: rotateY(180deg) translateZ(300px)
}

section div:nth-child(5){
   transform: rotateY(240deg) translateZ(300px)
}

section div:nth-child(6){
   transform: rotateY(300deg) translateZ(300px)
}