在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；

transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：

none 表示不做变换； <transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：

所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等

扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；

它是来设置过渡效果的速率，它有6种形式的速率：

它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：

animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：

它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：

和 transition-timing-function 类似：

它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：

它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：

它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：

它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。

transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top

 rotate:         是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

                     2D：rotate( angle )定义 2D 旋转，在参数中规定角度。

                     3D：rotate3d( x , y , z , angle )定义 3D 旋转。

                     事例：2D:transform: rotate(45deg)3D:ransform: rotate3d(0,0,0,45deg)

scale:           是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。

                    2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。

                    3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。

                    事例：2D:scale: scale(2,3)3D:ransform: scale3d(0,0,1)

translate  ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。

                    2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。

                   3D：translate3d( x , y , z )定义 3D 转化。

                   事例：2D:transform: translate(50px,100px)3D:ransform: translate3d(50px,100px,50px)

skew：       是transform的值，定义倾斜，表示对当前元素的倾斜角度。

                   skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

                   事例：transform: skew(1deg,2deg)

transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等

                        transition : transition-property   transition-duration   transition-timing-function   transition-delay

                        transition-property :规定应用过渡的 CSS 属性的名称。

                      transition-duration :定义过渡效果花费的时间。默认是 0。

                      transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。

                      transition-delay :规定过渡效果延迟的时间。默认是 0。

                      事例：  transition : width 2s ease-in-out  1s

animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前                            状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

      @keyframes fadeIn {

                    0% {opacity:0}

                  100% {opacity:1}

         }

                          事例：animation:fadeIn 5s infinite（fadeIn是帧动画的名称）infinite 无限循环

@keyframes fadeIn {

0% {opacity:0}

100% {opacity:1}

}

@keyframes fadeout {

0% {opacity:1}

100% {opacity:0}

}

@keyframes pendulu {

from {transform:rotate3d(0,0,1,0)}

5.5% {transform:rotate3d(0,0,1,-11deg)}

7% {transform:rotate3d(0,0,1,-12deg)}

16% {transform:rotate3d(0,0,1,9deg)}

17.5% {transform:rotate3d(0,0,1,10deg)}

26.5% {transform:rotate3d(0,0,1,-7deg)}

28% {transform:rotate3d(0,0,1,-8deg)}

36.5% {transform:rotate3d(0,0,1,5deg)}

38% {transform:rotate3d(0,0,1,6deg)}

46.5% {transform:rotate3d(0,0,1,-4deg)}

48% {transform:rotate3d(0,0,1,-5deg)}

57% {transform:rotate3d(0,0,1,3deg)}

58.5% {transform:rotate3d(0,0,1,4deg)}

66.5% {transform:rotate3d(0,0,1,-2deg)}

68% {transform:rotate3d(0,0,1,-3deg)}

75% {transform:rotate3d(0,0,1,1.5deg)}

76.5% {transform:rotate3d(0,0,1,2.5deg)}

82.5% {transform:rotate3d(0,0,1,-1deg)}

84% {transform:rotate3d(0,0,1,-2deg)}

90% {transform:rotate3d(0,0,1,1.5deg)}

95% {transform:rotate3d(0,0,1,-1deg)}

to {transform:rotate3d(0,0,1,0)}

}

@keyframes scale {

0% {transform:scale(0.9)}

100% {transform:scale(1)}

}

@keyframes cloud {

0% {transform:translateX(0)}

25% {transform:translateX(30%)}

50% {transform:translateX(60%)}

75% {transform:translateX(30%)}

100% {transform:translateX(0)}

}

@keyframes  fadeInDown

{

0% {

    opacity: 0

    filter: alpha(opacity=0)

    -webkit-transform: translate3d(0, -100%, 0)

    transform: translate3d(0, -100%, 0)

}

100% {

    opacity: 1

    filter: alpha(opacity=100)

    -webkit-transform: none

    /* transform: none*/

}}

@-webkit-keyframes bounceIn {

0%,20%,40%,60%,80%,100% {

-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1)

transition-timing-function:cubic-bezier(.215,.61,.355,1)

}

0% {

opacity:0

filter:alpha(opacity=0)

-webkit-transform:scale3d(2,2,2)

transform:scale3d(2,2,2)

}

40% {

-webkit-transform:scale3d(.9,.9,.9)

transform:scale3d(.9,.9,.9)

}

60% {

-webkit-transform:scale3d(1.03,1.03,1.03)

transform:scale3d(1.03,1.03,1.03)

}

80% {

opacity:1

filter:alpha(opacity=100)

-webkit-transform:scale3d(.97,.97,.97)

transform:scale3d(.97,.97,.97)

}

100% {

-webkit-transform:scale3d(1,1,1)

transform:scale3d(1,1,1)

}

}

.rotate2d {

-webkit-animation-timing-function:linear

animation-timing-function:linear

-webkit-animation-name:rotate2d

animation-name:rotate2d

}

.box-bottle {

position:absolute

left:70%

width:pr(99)

height:pr(97)

background:url("#{$imgPath}btn-bottle.png")no-repeat

background-size:100%

transform-origin:35% 68%

opacity:0

z-index:10

div {

position:absolute

width:pr(18)

height:pr(35)

transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg)

transition:opacity .5s linear 1.5s

}

i {

position:absolute

width:pr(18)

height:pr(35)

background-repeat:no-repeat

background-size:100%

transform-origin:3000% 50%

opacity:0

&:nth-child(1) {

transition:transform 1s ease-out 1s,opacity .2s linear .9s

background-image:url("#{$imgPath}water1.png")

}

&:nth-child(2) {

transition:transform 1.1s ease-out .9s,opacity .2s linear .8s

background-image:url("#{$imgPath}water2.png")

}

&:nth-child(3) {

transition:transform 1.2s ease-out .8s,opacity .2s linear .7s

background-image:url("#{$imgPath}water3.png")

}

&:nth-child(4) {

transition:transform 1.3s ease-out .7s,opacity .2s linear .6s

background-image:url("#{$imgPath}water4.png")

}

&:nth-child(5) {

transition:transform 1.4s ease-out .6s,opacity .2s linear .5s

background-image:url("#{$imgPath}water5.png")

}

&:nth-child(6) {

transition:transform 1.5s ease-out .5s,opacity .2s linear .4s

background-image:url("#{$imgPath}water6.png")

}

}

&.active {

opacity:1

animation:pour 2.5s both

div {

opacity:0

}

i {

opacity:1

&:nth-child(1) {

transform:rotate3d(0,0,1,-25deg)

}

&:nth-child(2) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0)

}

&:nth-child(3) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0)

}

&:nth-child(4) {

transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0)

}

&:nth-child(5) {

transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0)

}

&:nth-child(6) {

transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0)

}

}

}

}

---