CSS动画属性+变形属性

动画

1.过渡动画

复合属性

transition-property:针对HTML哪个CSS属性及逆行平滑渐变处理（其中all表示所有）

transition-duration: 指定平滑渐变持续的时间

transition-timing-function: 渐变的速度，支持如下几个值

ease 动画开始时较慢，然后速度加快，达到最快时再减慢速度

linear 先行速度，动画开始到结束速度不变

ease-in 动画开始时较慢，然后速度加快

ease-out 动画开始时最快，然后速度逐渐减慢

可以写为

transition: all 1.5s ease-out;

2.帧动画

anchor-name:设置动画名称

/* 关键帧定义 */

@keyframes名字{

    from/to/百分比{

        属性1：值;

        属性2：值;

    }

}

from开始状态，to最后状态，百分比中间状态

animation-name: aaa;设置动画名称

animation-duration: 4s;指定动画持续时间

animation-timing-function: linear;动画的变化速度，支持如下几个值

ease 动画开始时较慢，然后速度加快，达到最快时再减慢速度

linear 先行速度，动画开始到结束速度不变

ease-in 动画开始时较慢，然后速度加快

ease-out 动画开始时最快，然后速度逐渐减慢

animation-delay: 2s;指定动画延迟多长时间之后执行

animation-iteration-count: infinite（无限次执行）;设置动画执行的次数

animation-direction: alternate（交替）;设置动画方向

animation:aaa 4slinear 2s infinite alternate;调用动画的取值不分先后，如果有两个时间第一个表示动画时长，第二个表是延迟时间

变形

1.移动

transform: translate(tx,ty)

HTML元素沿x轴移动tx距离，沿y轴移动ty的距离。ty可以省略，如果省略则ty默认为0

transform: translate3d(100px,50px,200px);（x,y,z）

transform: translateX(100px);

HTML元素沿x轴移动tx距离

transform: translateY(100px);

HTML元素沿y轴移动ty距离

transform: translateZ(100px);

HTML元素沿z轴移动tz距离

2.缩放

transform: scale(sx,sy);

表示HTML元素沿x轴的缩放比为sx,沿y轴的缩放比为sy sy可以省略，若省略sy则认为sy=sx

transform: scale3d(sx,sy,sz);

表示HTML元素沿x轴的缩放比为sx,沿y轴的缩放比为sy，沿z轴的缩放比为sz

transform: scaleX(3);

表示HTML元素沿x轴的缩放比为sx

transform: scaleY(3);

表示HTML元素沿y轴的缩放比为sy

transform: scaleZ(3);

表示HTML元素沿z轴的缩放比为sz

3.旋转

transform: rotate(angle);

HTML元素沿Z轴旋转angle度（单位为deg）

transform: rotateX(angle);

HTML元素沿X轴旋转angle度（单位为deg）

transform: rotateY(angle);

HTML元素沿Y轴旋转angle度（单位为deg）

transform: rotateZ(angle);

HTML元素沿Z轴旋转angle度（单位为deg）

transform: rotate3d(x,y,z,angle);

HTML元素沿指定轴旋转angle度（单位为deg）

4.倾斜

transform: skew(sx,sy);

HTML元素沿着X轴倾斜sx角度，沿着y轴倾斜sy角度。如果sy省略，则sy默认为0

transform: skewX(sx);

HTML元素沿着X轴倾斜sx角度（单位为deg）

transform: skewY(sy);

HTML元素沿着Y轴倾斜sy角度（单位为deg）

设置变形中心点

默认为中心位置

transform-origin: 属性值可以是百分比 px等具体的值，也可以是 top bottom left right

perspective: 500px; 3D透视效果，近大远小 作用在父级元素上，值越小，3D效果越好

transform-style: 3D嵌套效果

transform-style:preserve-3d ;子元素保留3D位置

transform-style:flat 子元素不保留3D位置（默认）

backface-visibility: hidden; 背面不可见（隐藏）

backface-visibility: visible; 背面可见