定义：可以设置一个网页元素，在不同的时间出现在不同的位置，做出不同的动作，从而实现复杂的动画

动画的使用步骤：

1. 先定义动画
   • 0%: 表示开始状态。可以省略。等同于
   • 其它百分比: 可以定义其它时间节点的运动状态，百分比需要是整数。如49%时运动到右上角
   • 100%: 表示结束状态。等同于
2. 再使用动画
   • 必须指定和属性

动画使用属性含义：

• animation-name: 指定使用的动画名称
• animation-duration: 指定动画一个运动周期内，即从from到to需要的时间。单位可以是s或ms。默认是0
• animation-timing-function: 动画的速度曲线，默认是ease。常用的可选参数还有: linear、ease-in、ease-out、ease-in-out
• animation-delay: 打开web页面，延迟多久才开始动画。单位可以是s或ms。默认是0
• animation-iteration-count: 动画循环的次数，默认是1。infinite表示无限循环
• animation-direction: 在第二次循环的时候，默认normal是回到起点开始第二次循环。使用alternate则从终点逆向运动到起点，第三次循环继续从起点开始循环
• animation-fill-mode: 动画结束时的状态。默认backwards是回到起点的状态。forwards则保持运动结束时的最终状态
• animation-play-state: 一般配合hover使用，当鼠标放到web元素上面时，就会暂停动画。默认是running保持运动

动画简写

• 格式:
• 注意: 不包含。其中动画名称和持续时间必填，其它可以省略
• 使用多个动画，用逗号分隔
• 例如:

示例：

1. 近大远小
2. 物体后面遮挡不可见

三维坐标系:

• x轴：水平向右。注意： x右边是正值，左边是负值
• y轴：垂直向下。注意： y下面是正值，上面是负值
• z轴：垂直屏幕。注意： 往外面是正值，往里面是负值

在2D移动的基础上多加了一个z轴移动的方向。因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动(需要使用透视)

• 单独移动z轴: 。注意：translateZ一般用px单位
• 一起移动: 或。其中x、y、z分别指要移动的轴的方向的距离

示例：

• 作用: 在2D平面产生近大远小视觉效果，从而实现3D效果。但还是3D物体投影在2D平面上
• 原理: 一、透视就是视距d，即眼睛离屏幕的距离，距离越小物体越大，距离越大物体越小；二、物体向屏幕偏移的距离就是z，z为正看到的物体越大，z为负看到的物体越小
• 实现: 在被观察元素的父元素上，指定，单位是像素

示例：

让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转

• transform:rotateX(45deg)：沿着x轴正方向旋转45度
• transform:rotateY(45deg)：沿着y轴正方向旋转45deg
• transform:rotateZ(45deg)：沿着Z轴正方向旋转45deg
• transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为角度

2.4.1 rotateX

使用左手准则判断旋转方向: 左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的正方向

示例：

2.4.2 rotateY

使用左手准则判断旋转方向: 左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的正方向

示例：

鼠标放到图片上，图片旋转45度的效果

2.4.3 rotateZ

使用左手准则判断旋转方向: 左手的大拇指指向z轴的正方向，其余手指的弯曲方向就是该元素沿着z轴旋转的正方向

示例：

鼠标放到图片上，图片旋转45度的效果

2.4.4 rotate3d

：沿着自定义轴旋转，x、y、z的值可以为0或1或其它矢量值，表示沿着该轴旋转的量，deg为角度。例如：

• 就是沿着x轴旋转45deg
• 就是沿着x和y轴的对角线旋转45deg

同样适用左手准则

示例:

• 作用: 控制子元素是否开启三维立体环境
• 默认: ，不开启。父元素有3D效果时，子元素只有2D的效果
• 开启: 在父元素使用。给子元素开启立体空间

示例：

使用。鼠标放到图片上，图片旋转45度的效果

官网地址

• 使用方式一：
  1. 从官网的【获取Swiper-下载Swiper】下载swiper-11.0.3.zip，然后查看demo文件夹下的html文件示例
  2. 自己的html中拷贝html文件示例的html结构、css样式(.swiper开头的)、js语法，然后引用和html文件示例一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
  3. 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中左箭头和右箭头的可以放到的外边
• 使用方式二：
  1. 在官网的【在线演示-Swiper基础演示】找到类似案例，然后在新窗口打开，右键查看网页源代码
  2. 自己的html中拷贝网页源代码的html结构、css样式(.swiper开头的)、js语法，然后引用和网页源代码一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
  3. 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中左箭头和右箭头的可以放到的外边

是为了兼容老版本浏览器的写法，比较新版本的浏览器无须添加。私有前缀如下：

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性

提倡的写法如下。一个属性如果存在兼容性问题，则书写多个浏览器的私有前缀属性。如在谷歌浏览器，和都有效