过渡
transition(复合属性),参数有:
property:参与过渡的属性,none | all | property(元素名)
duration:过渡时间
timing-function:过渡动画类型, ease(默认 0-慢-快-慢) | linear(匀速) | ease-in(慢-快) | ease-out(快-慢) | ease-in-out(慢-快-慢)
delay:延迟时间
变换
transform(复合属性)
2d
rotate(2d旋转):单位度数deg,正顺时针,负逆时针
translateX和Y(平移):单位px,百分比(自身长宽)
skewX和Y(扭曲变形):单位deg
scaleX和Y(缩放):单位正数,默认1,0.01-0.99缩小,1以上扩大
3d
rotateX,Y和Z:单位度数deg,XYZ轴上的旋转角度
translateX,Y和Z:单位px,百分比,在XYZ轴平移
scaleX,Y和Z:单位正数,XYZ轴缩放
perspective(景深,实现近大远小):单位px,越大近处看起来越大
动画
@keyframes animationname{
from{transform:…}
50%{transform:…}
to{transform:…}
}
animation:name duration timing-function delay