/*
【创建动画CSS】
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

【transform】：向元素应用 2D 或 3D 转换。
【transform-origin】：允许你改变被转换元素的起始位置。

【transition】
transition/-moz-transition/-webkit-transition/-o-transition：过渡，元素从一种样式逐渐改变为另一种的效果
【示例】：
.img14{
    transition: transform 2s;
}
.img14:hover{
    transform: rotateY(30deg);
}

【动画API：】
1，translate：元素从其当前位置移动，根据给定的 left（x 坐标） 、 top（y 坐标）和z坐标 位置参数
translateX(x)
translateY(y)
translateZ(z)
translate(x,y)
translate3d(x,y,z)

2，rotate：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。单位：deg
rotate(angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate3d(x,y,z,angle)

3，scale：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）和z坐标 位置参数
scaleX(x)
scaleY(y)
scaleZ(z)
scale(x,y)
scale3d(x,y,z)

4，skew(x,y) 方法   skewX(angle)，skewY(angle)
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数;单位：deg

5,perspective(n);	定义 3D 转换元素的透视视图。
*/


/*【示例：页面加载完成后，div顺时针旋转一圈】*/
/*第一步：定义动画*/
@keyframes animate {
    /*表示0%，起始*/
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);		/* IE 9 */
        -webkit-transform: rotate(0deg);	/* Safari and Chrome */
        -o-transform: rotate(0deg);		/* Opera */
        -moz-transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);		/* IE 9 */
        -webkit-transform: rotate(90deg);	/* Safari and Chrome */
        -o-transform: rotate(90deg);		/* Opera */
        -moz-transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);		/* IE 9 */
        -webkit-transform: rotate(180deg);	/* Safari and Chrome */
        -o-transform: rotate(180deg);		/* Opera */
        -moz-transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);		/* IE 9 */
        -webkit-transform: rotate(270deg);	/* Safari and Chrome */
        -o-transform: rotate(270deg);		/* Opera */
        -moz-transform: rotate(270deg);
    }
    /*表示100%，完成*/
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);		/* IE 9 */
        -webkit-transform: rotate(360deg);	/* Safari and Chrome */
        -o-transform: rotate(360deg);		/* Opera */
        -moz-transform: rotate(360deg);/* Firefox */
    }
}

/* Firefox */
@-moz-keyframes animate
{
    /*表示0%，起始*/
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);		/* IE 9 */
        -webkit-transform: rotate(0deg);	/* Safari and Chrome */
        -o-transform: rotate(0deg);		/* Opera */
        -moz-transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);		/* IE 9 */
        -webkit-transform: rotate(90deg);	/* Safari and Chrome */
        -o-transform: rotate(90deg);		/* Opera */
        -moz-transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);		/* IE 9 */
        -webkit-transform: rotate(180deg);	/* Safari and Chrome */
        -o-transform: rotate(180deg);		/* Opera */
        -moz-transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);		/* IE 9 */
        -webkit-transform: rotate(270deg);	/* Safari and Chrome */
        -o-transform: rotate(270deg);		/* Opera */
        -moz-transform: rotate(270deg);
    }
    /*表示100%，完成*/
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);		/* IE 9 */
        -webkit-transform: rotate(360deg);	/* Safari and Chrome */
        -o-transform: rotate(360deg);		/* Opera */
        -moz-transform: rotate(360deg);/* Firefox */
    }

}

/* Safari 和 Chrome */
@-webkit-keyframes animate
{
    /*表示0%，起始*/
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);		/* IE 9 */
        -webkit-transform: rotate(0deg);	/* Safari and Chrome */
        -o-transform: rotate(0deg);		/* Opera */
        -moz-transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);		/* IE 9 */
        -webkit-transform: rotate(90deg);	/* Safari and Chrome */
        -o-transform: rotate(90deg);		/* Opera */
        -moz-transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);		/* IE 9 */
        -webkit-transform: rotate(180deg);	/* Safari and Chrome */
        -o-transform: rotate(180deg);		/* Opera */
        -moz-transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);		/* IE 9 */
        -webkit-transform: rotate(270deg);	/* Safari and Chrome */
        -o-transform: rotate(270deg);		/* Opera */
        -moz-transform: rotate(270deg);
    }
    /*表示100%，完成*/
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);		/* IE 9 */
        -webkit-transform: rotate(360deg);	/* Safari and Chrome */
        -o-transform: rotate(360deg);		/* Opera */
        -moz-transform: rotate(360deg);/* Firefox */
    }
}

/* Opera */
@-o-keyframes animate
{
    /*表示0%，起始*/
    from {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);		/* IE 9 */
        -webkit-transform: rotate(0deg);	/* Safari and Chrome */
        -o-transform: rotate(0deg);		/* Opera */
        -moz-transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);		/* IE 9 */
        -webkit-transform: rotate(90deg);	/* Safari and Chrome */
        -o-transform: rotate(90deg);		/* Opera */
        -moz-transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);		/* IE 9 */
        -webkit-transform: rotate(180deg);	/* Safari and Chrome */
        -o-transform: rotate(180deg);		/* Opera */
        -moz-transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
        -ms-transform: rotate(270deg);		/* IE 9 */
        -webkit-transform: rotate(270deg);	/* Safari and Chrome */
        -o-transform: rotate(270deg);		/* Opera */
        -moz-transform: rotate(270deg);
    }
    /*表示100%，完成*/
    to {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);		/* IE 9 */
        -webkit-transform: rotate(360deg);	/* Safari and Chrome */
        -o-transform: rotate(360deg);		/* Opera */
        -moz-transform: rotate(360deg);/* Firefox */
    }

}

/*第二步：调用动画*/
.animate{
/*    -webkit-animation-name: animate;/!*动画名称*!/
    animation-name: animate;
    -webkit-animation-duration: 2s;/!*动画完成一个周期的时长*!/
    animation-duration: 2s;*/
    animation: animate 2s;
    -moz-animation: animate 2s;	/* Firefox */
    -webkit-animation: animate 2s;	/* Safari 和 Chrome */
    -o-animation: animate 2s;
}

/*
【animation系列属性】

 1，animation-name
 动画名名称;

 2，animation-duration
 动画完成一个周期的时长

 3，animation-timing-function
 规定动画的速度变化：
 linear（匀速）、
 ease（默认：慢-快-慢）、
 ease-in（低速开始）、
 ease-out（低速结束）、
 ease-in-out（低速开始和结束）、
 cubic-bezier(n,n,n,n)--通过贝兹曲线来定义。n取值范围：0~1；

 4，animation-delay
 延时

 5，animation-iteration-count
 动画执行次数

 6，animation-direction
 规定动画是否在下一周期逆向地播放。默认是 "normal"。
  "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

  7，animation-fill-mode
  对象动画时间之外的状态
  none:不改变默认行为。
  forwards:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  backwards:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  both:	向前和向后填充模式都被应用。

  8，animation-play-state
  规定动画是否正在运行或暂停。默认是 "running"。paused:暂停
*/