定义：可以设置一个网页元素，在不同的时间出现在不同的位置，做出不同的动作，从而实现复杂的动画
动画的使用步骤：
- 先定义动画
- 0%: 表示开始状态。可以省略。等同于
- 其它百分比: 可以定义其它时间节点的运动状态，百分比需要是整数。如49%时运动到右上角
- 100%: 表示结束状态。等同于
- 再使用动画
- 必须指定和属性
动画使用属性含义：
- 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保持运动
动画简写
- 格式:
- 注意: 不包含。其中动画名称和持续时间必填，其它可以省略
- 使用多个动画，用逗号分隔
- 例如:
示例：
- 近大远小
- 物体后面遮挡不可见
三维坐标系:
- 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度的效果
官网地址
- 使用方式一：
- 从官网的【获取Swiper-下载Swiper】下载swiper-11.0.3.zip，然后查看demo文件夹下的html文件示例
- 自己的html中拷贝html文件示例的html结构、css样式(.swiper开头的)、js语法，然后引用和html文件示例一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
- 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中左箭头和右箭头的可以放到的外边
- 使用方式二：
- 在官网的【在线演示-Swiper基础演示】找到类似案例，然后在新窗口打开，右键查看网页源代码
- 自己的html中拷贝网页源代码的html结构、css样式(.swiper开头的)、js语法，然后引用和网页源代码一样的CSS文件(放在引用自己的CSS文件前面)和JS文件
- 查看官网的【API文档】，根据自己的需求进行改造(可以参考多个html文件示例)。其中左箭头和右箭头的可以放到的外边
是为了兼容老版本浏览器的写法，比较新版本的浏览器无须添加。私有前缀如下：
- -moz-：代表firefox浏览器私有属性
- -ms-：代表ie浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
提倡的写法如下。一个属性如果存在兼容性问题，则书写多个浏览器的私有前缀属性。如在谷歌浏览器，和都有效