动画-animation

空间转换

• 空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。

• 空间转换也叫3D转换

• 属性：transform

空间转换-平移

• 属性

transform:translate3d(x,y,z);
transform:translateX();
transform:translateY();
transform:translateZ();

• 取值（正负均可）

  1. 像素单位数值

  2. 百分比（参照盒子自身尺寸计算结果）

视距perspective

作用：指定了观察者与Z=0平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性:(添加给父级，取值范围800-1200)

perspective：视距;

空间-旋转

• transform:rotateZ(值);

• transform:rotateX(值);

• transform:rotateY(值)

• 左手法则-根据旋转方向确定取值正负

  左手握住旋转轴，拇指指向正值方向，其它四个手指弯曲方向为旋转正值方向

立体呈现-transform-style

作用：设置元素的子元素是位于3D空间中还是平面中

属性名：transform-style

属性值：flat:子级处于平面中，perserve-3d:子级处于3D空间

空间转换-缩放

• 属性

transform:scale3d(x,y,z);
transform:scaleX();
transform:scaleY();
transform:scaleZ();

动画-animation

• 过渡：实现两个状态间的变化过程

• 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

属性	作用	取值
animation	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forward:最后一帧状态，backwards:第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合：hover使用

动画-逐帧动画

属性	作用	取值
animation-timing-function	速度曲线	steps（数字）：逐帧动画