这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战”

CSS动画

制作动画分两步(相当于类选择器，先定义好样式，再通过类名调用)

●   1.定义动画

●   keyframes意为关键帧。动画序列0%~100%也可以写成from···和to···。此外，动画序列不仅只能设置两个状态，可以实现多个状态变化，如：0%~25%~50%~75%~100%，这里的百分比是对总时间的划分

●   2.使用(调用)动画

动画的常见属性

animation-name 规定动画的名称(必须)

animation-duration 规定动画完成一个周期的时间(秒/毫秒)(必须)

animation-timing-function规定动画的速度曲线，默认值为ease

●   ease低速开始，然后加快，结束时变慢

●   linear匀速

●   ease-in低速开始

●   ease-out低速结束

●   ease-in-out低速开始和结束

●   steps() 指定时间函数中的间隔数量(步长)

●   如设置steps(5)，则动画将分5部完成

●   animation-delay规定动画何时开始，默认为0

●   animation-iteration-count 规定动画的重复次数，默认为1，设置为infinite则无限循环

●   animation-direction规定动画是否反方向播放，默认为normal，设置为alternate则逆向播放

●   animation-fill-mode规定动画结束后的状态，默认为backwards回到初始状态，设置为forwards则保持在结束状态

●   animation-play-state 规定动画是否正在进行或者暂停，默认是running。若设置paused，则动画停止不动，可以配合:hover来设置鼠标悬浮则停止

●   动画属性的简写-->animation: 动画名称 持续时间 运动曲线 何时开始播放次数 是否反方向 是否保持结束的状态

●   例：animation: move 1s linear 0s 1 alternate forwards

●   这其中动画名称和持续时间是必须写的属性，其他的可以保持默认

3D转换

3D位移translate3d(x,y,z)，也可以对应坐标轴设置transform: translateX() translateY() translateZ(); 注意每个方向用空格隔开，但是不能分开单独写三个transform，以为后写的会覆盖前面的

●   注意：z轴的位移是看不到的，要加入透视perspective属性才能看到

3D旋转rotate3d(x,y,z,旋转角度)，可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴来旋转。x,y,z是旋转轴的矢量，表示是否沿着这条轴旋转(如 transform: rotate3d(1,0,0,45deg)表示沿着x轴旋转45度; transform: rotate3d(1,1,0,45deg)表示沿着对角线旋转45度)

    

●   判断元素沿x轴旋转时的正方向

●   判断元素沿y轴旋转时的正方向

透视perspective(单位为px)，也叫视距，加了透视的页面元素在变化时就会呈现立体感(非常中要)

●   注意：透视要写在被观察元素的父盒子上面(通常写在body里)

●   透视是模拟人的眼睛，有近大远小的效果。当透视(视距)越小，元素到人眼的距离越小(越近)，看到的元素就越大；视距越大，元素到人眼的距离越大(越远)，看到的元素就越小。

●   当视距固定时，元素向z轴正向移动，就越来越大；元素向z轴负方向移动就越来越小

3D 呈现transform-style(非常重要)

控制子元素是否开启三维立体环境

●   transform-style: flat; 默认值，不开启三维立体环境

●   transform-style: preserve-3d;开启子元素三维立体环境

●   注意：transform-style属性要写在父盒子内，影响的是子元素

做3D时，透视perspective和3D呈现transform-style: preserve-3d;必不可少！！！

注意！！！只要是写transform属性不管是2D还是3D，在同一个元素上使用时一定要用简写！如: transform: translate(x,y) rotate3d(x,y,z,deg);同时实现两种变化，不能拆开写两个transform，这样后面的transform会覆盖前面的，导致前面的失效