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 动画步数