空间与动画的使用（笔记）

@keyframe 名称{
                0%{}
                50%{}
                100%{}
               }

一、空间的位移

transform:translate3d (x, y, z )

单独设置x,y,z轴（px为单位）translate后面跟的x，y，z为大写

X轴：

translateX（x px）

Y轴：

translateY（y px）

Z轴：

translateZ(z px)

注：z轴需要配合透视法肉眼才能看到效果。

二、透视法

给父级加个perspective

取值：（建议）800~1200px

三、空间旋转

transform：rotate（值为角度 单位为deg）

• 各轴用法与位移一致

四、立体呈现

给父元素加tracsform-style:preserve-3d

可以让子元素处于真正的3d空间

五、动画

使用animation添加动画效果

1.动画于过度的区别

（1）.过度只能实现两个状态间的变化。

（2）.动画可以实现多个状态间的变化。

动画的本质士快速切换大量图片时，人脑中形成具有连续性的画面。

构成动画的最小单元为：帧。

2.动画的两种写法。

方法一：实现两种变化

@keyframe 名称{
            from{}
            to{}
                }

from写开始状态，to写结束变化

方法二：实现多种变化

@keyframe 名称{
                0%{}
                50%{}
                100%{}
               }

百分比表示每个阶段的状态

3.animation的用法与值

• 谁要动画给谁加animation
• animation取值不分先后顺序 （但是animation有两个值必须加：动画名称和动画时长）
• 如果出现两个时间值，第一个表示动画时长，第二个表示延迟时间。

取值：

（1）、动画名称animation-name

                @keyframe中取得名称

（2）、动画时长animation-duration

                数字+s（s为单位）

（3）、速度曲线animation-timing-function

                匀速动画：linear

                逐帧动画：steps（）    括号中写数字，表示分几部分

（4）、延迟时间animation-delay

                数字+s （s表示单位）

（5）、重复次数animation-iteration-count

•      直接写个数字

                        例：3    （表示重复播放三次）

•       infinite （这个代表无限循环）

（6）、动画方向animation-direction

                alternate（这个表示反向运动）

（7）、执行完毕时状态animation-fill-mode

                初始状态：backwards（此为默认值）

                最终状态：forwards

（8）、动画的暂停animation-play-state

                值：pused为暂停，一般配合hover使用