css3 transition动画
1,transition-property设置过渡的属性,比如width height background-color
2,transition-duration设置过度的时间,比如:1s 500ms
3,transition-timing-function设置过渡的运动方式
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
比如:cubic-bezier(0.845,-0.375,0.215,1.335)
曲线设置网站:https://matthewlein.com/ceaser/
4,transition-delay 设置动画延迟
5,transition:property duration timing-function delay 同时设置四个属性。
css3 transform变换
1,translate(x,y)设置盒子位移
2,scale(x,y)设置盒子缩放
3,rotate(deg)设置盒子旋转
4,skew(x-angle,y-angle)设置盒子斜切
5,perspective 设置透视距离
6,transform-style flat | preserve-sd 设置盒子是否按3d空间显示
7,translateX,rotateY,rotateZ设置三维移动
8,rotateX,rotateY,rotateZ 设置三维旋转
9,scaleX,scaleY,scaleZ 设置三维缩放
10,tranform-origin 设置变形的中心点
11,backface-visibility 设置盒子背面是否可见