3D 动画(伪3D, 真牛B)

3d变换属性
每个属性多了一个Z

rotate旋转
translate 平移
perspective：2000px透视点
perspective-origin：25% 75%；
transform-style：preserve-3d：该声明应用在3d变换的兄弟元素们的父元素上，也就是舞台元素

关键帧
@KEYFRAMES写法
@-webkit-keyframes INENT{
from{Properties:properties value;}
percentage{Properties:Properties value;}
to{ Properties:properties value;}
}
animate属性
-webkit-animation-name:”move”；动画属性名，也就是我们前面keyframes定义的动画名
/*aninn*/
     /*-webkit-animation-name: "move";
     -o-animation-name: "move";
     animation-name: "move";*/

-webkit-anmiation-duration：10s 动画持续时间
/*duration 持续时间*/
/*-webkit-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;*/
-webkit-anmiation-timing-function：ease-in-out:动画频率 和transition-timing-function是一样的
  /*频率animtf*/
     /*-webkit-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     -o-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);*/
-webkit-animation-delay：2s；动画延迟时间
-webkit-animation-iteration-count:10;定义循环的次数，infinite为无限次
/*循环次数 animic infinite 无限次循环*/
     /*-webkit-animation-iteration-count: 10;
     -o-animation-iteration-count: 10;
     animation-iteration-count: 10;*/
-webkit-animation-direction：alternate 定义动画轮流反向播放
/*animdi默认返回原位置 反向执行*/
     /*-webkit-animation-direction: alternate;
     -o-animation-direction: alternate;
     animation-direction: alternate;*/
-webkit-animation-paly-state：paused；paused暂定，running播放
  /*nfts 动画的播放状态 pushed暂停*/
     /*-webkit-animation-play-state: running;
     -o-animation-play-state: running;
     animation-play-state: running;*/
-webkit-animation-fill-mode:forwards:保持最后一个属性值
/*animfm保持最后一个值*/
     /*-webkit-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;*/
         /*动画的名字 动画的时间 运动曲线 循环次数*/
animation
  /*动画的名字 动画的时间 运动曲线 循环次数*/
     -webkit-animation: "move" 2s linear 2;
     -o-animation: "move" 2s linear 2;
     animation: "move" 2s linear 2;