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;

 <style type="text/css">
    /*关键帧  在css中声明 定义动画*/
    @-webkit-keyframes "move"{
     0%{
      /*开始 一般省略*/
         *transform*: translateX(0); 
     }
     30%{
            *transform*: translateX(100px); 
     }
     /*60%{
      -webkit-transform: translate(50px,100px);
      -ms-transform: translate(50px,100px);
      -o-transform: translate(50px,100px);
      transform: translate(50px,100px);
     }*/
     100%{
      *transform*: translateX(0px);
     }
    }
    div{
     *width*: 100px;
     *height*: 100px;
     *background-color*: red;
     /*aninn*/
     /*-webkit-animation-name: "move";
     -o-animation-name: "move";
     animation-name: "move";*/
     /*duration 持续时间*/
     /*-webkit-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;*/
        /*频率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);*/

     /*循环次数 animic infinite 无限次循环*/
     /*-webkit-animation-iteration-count: 10;
     -o-animation-iteration-count: 10;
     animation-iteration-count: 10;*/
        /*animdi默认返回原位置 反向执行*/
     /*-webkit-animation-direction: alternate;
     -o-animation-direction: alternate;
     animation-direction: alternate;*/
        /*nfts 动画的播放状态 pushed暂停*/
     /*-webkit-animation-play-state: running;
     -o-animation-play-state: running;
     animation-play-state: running;*/

     /*animfm保持最后一个值*/
     /*-webkit-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;*/
         /*动画的名字 动画的时间 运动曲线 循环次数*/
     *-webkit-animation*: "move" 2s *linear *2;
     -o-animation: "move" 2s *linear *2;
     *animation*: "move" 2s *linear *2;
    }