1）transition过渡动画

基本语法

transition:样式名 时间 动画类型 延时;
参数：
样式名：为all时，代表规定的所有样式一起发生改变。
时间：指完成动画的时间。以秒为单位
动画类型：动画的过渡效果。如：
linear，规定以相同速度开始至结束的过渡效果。
ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。
延时：规定多少时间后执行动画。以秒为单位，可以省略此参数。

示例

  1.   1、设置标签开始样式并添加过渡动画
  2.             div{
  3.                   width:100px;
  4.                   height:100px;
  5.                   background:red;
  6.                   transition:all 2s ease 1s; 
  7.             }
  9.             width:100px;  设置div宽为100像素
  10.             height:100px;  设置div高为100像素
  11.             background:red;  设置div宽为背景色为红色
  12.             transition:all 2s ease 1s; 设置div完成过渡动画的时间为2秒且1秒后执行
  14.     2、设置标签过渡后的样式
  15.         div:hover{
  16.               width:1000px;
  17.               height:500px;
  18.         }
  19.         width:1000px;  设置鼠标移入div上方后宽度为1000像素
  20.         height:500px;  设置鼠标移入div上方后高度为500像素

2）3D动画

【1】transform

基本语法

transform:转换方法();

功能

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

【2】perspective

基本语法

perspective: number | none;
值
number元素距离视图的距离，以像素计。

功能

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

【3】perspective-origin

基本语法

perspective-origin：x轴上的位置 y轴上的位置;
值
left | center | right| length | %

功能

  1.     perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。<br />当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

【4】transform-origin

基本语法

transform-origin: x轴上的位置 y轴上的位置 轴上的位置;
值
left | center | right| length | %

功能

设置被转换元素的基点位置。

【5】transform常用的2D或3D转换方法

值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

3）切屏动画

以四图全屏切屏为例，首先需要制作一个大的div宽高分别为100%，即全屏显示。
然后制作4个子元素，依次放入4张图片，并且设置图片的宽高同父级的一样。如下图：
image.png

将父级元素整体向上移动一屏之后，将显示出第2张图片，依次方法显示第3、第4张图片，即现实切屏。如下图：
image.png

4）animation动画

【1】定义场景

基本语法

@keyframes 场景名称 {
  from{
      样式名:值;
  }
  to{
      样式名:值;
  }
}
说明
  from 设置动画开始之前的样式。
  to 设置动画结束之后的样式。
    或
@keyframes 场景名称 {
  0%{
      样式名:值;
  }
  50%{
      样式名:值;
  }
  100%{
      样式名:值;
  }
}
说明
  0% 设置动画开始之前的样式。
  50% 设置动画进行一半时的样式。
  100% 设置动画结束后的样式。

【2】定义动画

基本语法

animation:场景名称 播放时长 动画类型 播放次数;
值：
播放时长：单位为秒。默认值是 0。
动画类型：linear 动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
播放次数：数字| infinite。
infinite：为无限次播放。

示例

 1、设置子元素样式并定义动画

        #div1{
                width:50px;
                height:50px;
                background:red;
                position:absolute;
                animation:moveDiv 4s ease infinite;
        }
        animation:moveDiv 4s ease infinite;  定义动画场景名称为moveDiv播放时长为4秒且无限播放

    2、设置子元素动画场景

        @keyframes moveDiv {
                0%{left:0;top:0;}
                25%{left:450px; top:0;}
                50%{left:450px; top:450px;}
                75%{left:0; top:450px;}
                100%{left:0; top:0;}
        }
        0%{left:0;top:0;}  设置动画开始时子元素在左上角
        25%{left:450px; top:0;}  设置动画四分之一时子元素在右上角
        50%{left:450px; top:450px;}  设置动画一半时子元素在右下角
        75%{left:0; top:450px;}  设置动画四分之三时子元素在左下角
        100%{left:0; top:0;}  设置动画结束时子元素在左上角