动画相关整理

animation

animation是一个简写属性,用于设置六个动画属性:
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。infinite || forwards
animation-direction	规定是否应该轮流反向播放动画。

默认值:none 0 ease 0 1 normal

transition

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transform

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换,使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换,使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换,只是用 X 轴的值。	测试
translateY(y)	定义转换,只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换,只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转,在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

1、背对屏幕不可见:backface-visibility: hidden;

2、开启3d空间,给3d效果元素的父元素设置:transform-style: preserve-3d;

3、缩放: 元素缩放的系数,scale(宽度系数,高度的系数)   transform: scale(1.5,2);

4、斜切:skew(沿x轴斜切,沿y轴斜切)   transform: skew(0deg,0deg);

5、景深透视属性: 是一个近大远小的效果,视觉比较合理的取值范围800px-1500px
                             给效果元素的父元素设置该属性   perspective: 1000px;

6、z轴的位移:正值向屏幕外,负值向屏幕里   transform: translateZ(30px);