一、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动画1
animation-iteration-count 动画的播放次数
值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放
animation动画2
animation-direction 动画的播放方向
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放（向前播放，再往回缩）
animation动画3
二、3D
perspective透视 也可以理解为视距
你的眼睛距离物体的距离 距离物体越近 物体就越大 距离物体越远 物体就越小
要想实现3d效果必须要在父元素上加上一个属性perspective
1.translate
translate3d（x，y，z） 里面分别表示x轴距离 y轴距离 和z轴距离
translate3d(0,0,200px) 表示z轴向前移动200px
视觉上就感觉物体是慢慢的变大了（近大远小的原理）
translate3d
2.rotate
rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateX( deg);
rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转
transform: rotateY( deg);
rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转
transform: rotateZ( deg);
rotateZ
参数a取正值时元素相对原来中心顺时针旋转
3.transform-style: preserve-3d
如果想让子元素有3d的效果 必须要给父元素设置transform-style
transform-style默认值是flat
想变成3d效果要把值设置成preserve-3d
transform-style: preserve-3d
4.transform-origin
设置旋转后的元素的上下位置
（1）transform-origin: top;
transform-origin
（2）transform-origin: bottom;
transform-origin 1
