HTML CSS3动画

transition过渡动画  

transition动画

 transition:样式名 时间 动画类型 延时;

样式名：为all时，代表规定的所有样式一起发生改变。

        时间：指完成动画的时间。以秒为单位

        动画类型：动画的过渡效果。如：

            linear，规定以相同速度开始至结束的过渡效果。

            ease，规定慢速开始，然后变快，然后慢速结束的过渡效果。

        延时：规定多少时间后执行动画。以秒为单位，可以省略此参数。

3D动画

 transform 语法 transform:转换方法();

document.getElementById("div1").style.transform = "rotatey(-90deg)";

perspective 语法：  perspective: number | none; （透视距离）

perspective-origin 语法：perspective-origin：x轴上的位置  y轴上的位置; （透视角度）

transform-origin 语法： transform-origin: x轴上的位置  y轴上的位置  轴上的位置; （旋转原点）

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 转换元素定义透视视图。

动画监听

document.getElementById("div6").addEventListener("transitionend",function(){
            document.getElementById("msg_div").innerHTML = "提示：动画完成！！！";
          });

切屏动画

animation动画

  animation:场景名称 播放时长 动画类型 播放次数;

播放次数：数字| infinite。 infinite为无限次播放

@keyframes 场景名称 {    from{             样式名:值;         }         to{             样式名:值;             ……         }     }

@keyframes 场景名称 {         0%{             样式名:值;         }         50%{             样式名:值;         }         100%{             样式名:值;             ……         }     }

       透明度 ：opacity