一、animation动画

animation动画简介

animation实现动画主要由两个部分组成

通过类似Flash动画的关键帧来声明一个动画

在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

  浏览器支持

属  性  名   IE      Firefox    Chrome    Opera     Safari

animation  10+       5.0+       4.0+           12+       4.0+

关键帧 例如：

@keyframes spread {

   0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

 }

@keyframes的浏览器兼容性

属  性  名           IE          Firefox   Chrome   Opera    Safari

@keyframes     10+         5.0+         4.0+         4.0+    12.0+

写兼容的时候浏览器前缀是放在@keyframes中间

例如：@-webkit-keyframes（兼容谷歌）、@-moz-keyframes（兼容火狐）

animation:animation-name  animation–duration  animation-timing-function   animation-delay                  animation-iteration-count  animation-direction

        animation-name                    由@keyframes创建的动画名称

          animation–duration                 过渡时间

          animation-timing-function         过渡方式

linear          规定以相同速度开始至结束的过渡效果

ease  规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

animation-delay 延迟时间

animation:animation-name  animation–duration  animation-timing-function animation-delay（跟transition差不多）

 

animation-iteration-count 动画的播放次数

值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

 

animation-direction 动画的播放方向

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放（向前播放，再往回缩）

 

二、3D

perspective透视 也可以理解为视距

       你的眼睛距离物体的距离  距离物体越近 物体就越大   距离物体越远 物体就越小

           要想实现3d效果必须要在父元素上加上一个属性perspective 

1.translate

translate3d（x，y，z） 里面分别表示x轴距离 y轴距离 和z轴距离        

      translate3d(0,0,200px) 表示z轴向前移动200px

                    视觉上就感觉物体是慢慢的变大了（近大远小的原理）

 

2.rotate

rotateX是绕着x轴旋转  正值是向里面旋转    负值是向外面旋转 

           transform: rotateX(   deg);

rotateY是绕着y轴旋转  正值是向里面旋转 负值是向外面旋转  

           transform: rotateY(  deg);  

rotateZ是绕着z轴旋转  正值是顺时针旋转 负值是逆时针旋转

             transform: rotateZ(  deg);

 

参数a取正值时元素相对原来中心顺时针旋转

         

3.transform-style: preserve-3d

如果想让子元素有3d的效果 必须要给父元素设置transform-style  

             transform-style默认值是flat 

             想变成3d效果要把值设置成preserve-3d

 

            

4.transform-origin

           设置旋转后的元素的上下位置

（1）transform-origin: top;

 

（2）transform-origin: bottom;