08-动画

动画:

transition:在哪产生动画、动画的时间、运动曲线、延迟

all 所有的属性都可以变

border-radiue  圆角 最大200px

box-shadow: 水平方向  垂直方向  羽化大小 扩展大小 颜色 是否内阴影

opacity 设置透明度

text-align:center  文字居中

变形:

transform:

translate 位移

rotate  360度  沿z轴

scale  缩放

skew   斜切

相互之间不会影响

旋转:

默认沿z轴旋转

在方法后面写沿那个轴旋转

如:rotateX或Y

透视距离

perspective(设置透视距离)800px比较符合人眼的透视效果

需要给盒子加

transform-style:preserve-3; 设置盒子按3d空间显示

bug 该初始值为0度

解决跳变的方法,加一个容器

设置变形的中心点 transform-origin:左 中;

backface-visibility:hidden;  设置盒子背面是否美丽


animation动画

steps 动画步数

你可能感兴趣的:(08-动画)