css3动画

动画animation是由两个部分组成的：

设置关键帧+调用关键帧

浏览器支持

属 性 名      IE   Firefox   Chrome   Opera    Safari

animation  10+    5.0+      4.0+       12+        4.0+

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

@keyframes spread {

0% {width:0;}

33% {width:23px;}

66% {width:46px;}

100% {width:69px;}

}

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

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

@keyframes的浏览器兼容性

属 性 名          IE    Firefox  Chrome Opera  Safari

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

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

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

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

animation–duration 过渡时间

animation-timing-function 过渡方式（过渡方式有：ease、linear、ease-in、ease-out、ease-in-out）

animation-delay 延迟时间

animation-iteration-count 动画的播放次数（值通常为整数，默认值为1， 特殊值infinite，表示动画无限次播放 ，animation-iteration-count: 3;默认让动画执行三次 ，想要让动画执行几次，就写几，后面不能加单位）

animation-direction 动画的播放方向（normal，动画每次都是循环向前播放、 alternate，动画播放为偶数次则向前播放 ）

animation-fill-mode: forwards;     forwards 表示动画结束的时候会停在结束的位置

animation-fill-mode: backwards;    默认值是 backwards 表示动画结束的时候会返回原来的位置

animation-play-state: paused;     鼠标放上去的时候会让里面的动画播放暂停

animation-play-state: running;    默认动画是暂停的 鼠标放上去之后让动画开始跑

3D动画

transform: translate3d(0,0,200px);

translate3d 里面分贝表示x轴距离 y轴距离 和z轴距离，也可以写为 transform: translateZ(200px);

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

perspective：300px； （ perspective透视 也可以理解为视距）

transform: rotateX(30deg);（rotatex 是绕着x轴旋转，正值是向里面旋转，负值是向外面旋转）

 transform:rotateY(60deg);（rotateY 是绕着y轴旋转 正值是向里面旋转，负值是向外面旋转）

transform: rotateZ(60deg);（rotateZ 是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转）

设置旋转后的div的上下位置：

 没设置top或者bottom之前：

 设置了transform-origin: bottom;之后

transform-style:preserve-3d;（如果想让子元素有3d的效果 必需要给父元素设置transform-style，默认值是flat）

transform:rotate3d(1,0,0,30deg);   

transform:rotatex(30deg) rotateY(60deg) rotateZ(90deg);  三个轴不同角度的写法

简写的方法： transform:rotate3d(1,1,1,30deg);

rotate3d前三个参数，类似于开关的意思

            第一个表示是否绕着x轴旋转 如果是 就填1 不是就填0

            第一个表示是否绕着y轴旋转 如果是 就填1 不是就填0

            第一个表示是否绕着z轴旋转 如果是 就填1 不是就填0

都是1表示x y z轴都旋转30度