CSS3动画与2D、3D转换

一、过度动画：transition

　　五个属性：

　　　　transition-property css 样式属性名称

　　　　transition-duration 动画持续时间（需要单位s）

　　　　transition-timing-function 动画效果函数名称

　　　　　　linear、ease、ease-in、ease-out、

　　　　　　ease-in-out、cubic-bezier(n,n,n,n)

　　　　transition-delay 延迟执行动画的时间

　　　　animation-play-state:paused;暂停动画执行

　　简写

　　　　transition：样式 持续时间 动画效果 延迟时间

　　　　transition：持续时间；（all时间 ease 0）

二、关键帧动画

　　七个属性

　　　　animation-name 帧动画名称

　　　　animation-duration 动画持续时间（需要单位s）

　　　　animation-timing-function 动画效果函数名称（linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)）

　　　　animation-delay 延迟执行动画的时间

　　　　animation-iteration-count　　动画播放次数（n 次数；infinite 无限次）

　　　　animation-direction　　是否轮流播放（normal 正常播放 alternate 来回轮流播放）

　　　　animation-fill-mode：none丨forwards丨backwards丨both丨initial丨inherit；　　动画完成时的状态

　　样式：

　　　　@keyframes 帧动画名称{selector{styles}}

　　　　　　selector　　from　　to/%

　　简写：

　　　　animation：name time ease delay count direction fill-mode；

三、transform的2D变换

　　偏移（left  top）

　　　　translate（x,y）translateX（） translateY（）

　　缩放（width   height）

　　　　scale（x,y） scaleX() scaleY()

　　旋转

　　　　rotate（角度）

　　倾斜

　　　　skew(x角度，y角度) 　　skewX(角度)　　skewY（角度）

四、transform的3D变换

　　每个属性都比2D多了一个Z轴需要设置transform-style:preserve-3d；才能看到3D视觉效果

　　偏移（left　　top　　景深）

　　　　translate3d（x,y,z,angle）　　translateX（）　　translateY（） translateZ（）

　　缩放（ width　　height　　景深）

　　　　scale3d（x,y,z）　　scaleX（）　　scaleY（）　　scaleZ（）

　　旋转

　　　　rotate3d（x,y,z）　　rotateX（）　　rotateY（）　　rotateZ（）

　　注：倾斜没有Z轴

　　transform-origin　　改变被变换元素的转换参考位置

　　　　transform-origin：left top；（left　　top之间是空格）

五、3D透视（效果类似于相机拍照）

　　透视距离（perspective）

　　　　当给一个元素设置透视属性时，其子元素会获得透视效果，通过设置不同的值，可以改变观察子元素的距离

　　透视位置（perspective-origin）

　　　　需要先使用perspective，可以改变在观察子元素时，观察点的X,Y方向的位置

　　设置背面不可见（backface-visibility:hidden）

　　　　设置之后，当旋转180度查看元素背面时，将看不到正面透视内容（如果不设置，默认正面内容可以被透视）