CSS3 动画

        CSS3提供了强大的动画功能，包括transform(变换)、transition(转换)和animation(动画)。这里记录我从论道和网上的学习笔记。

        transform主要控制元素进行平面上的二维变换。eg:旋转，缩放，变形。

        1、旋转属性:rotate，当旋转的角度为正值时表示顺时针方向旋转，单位为度数(deg)。transform:rotate(120deg);

        2、缩放属性:scale，可以对元素按照百分比进行放大和缩小。transform:scale(1.1);

        3、偏斜属性:skew,有两个参数，第一个表示按照x轴逆时针偏斜，当为负值的时候表示顺时针偏斜。第二个参数表示y轴顺时针偏斜，当为负数时表示逆时针方向。

        4、平移属性:translate,第一个参数为x轴方向的平移距离，第二个参数为y轴方向的平移距离。

        多个属性可以同时设置，之间用空格间隔。eg：transform: translate(100px,100px)  skew(20px,30px);

        transition可以在一个或多个CSS属性改变是自动地展现渐变动画。开始真正支持动画啦啦。

        transition可以分为四个属性:
        1、transition-property:指定哪些属性改变时显示transition效果。none表示没有，all表示所有属性，或是用逗号分隔表示需要指定的属性。eg:width , length。

        2、transition-duration属性表示转换持续时间，可以设置多个时间，中间用逗号隔开，每个时间跟相应的属性对应。

        3、transition-timing-function表示转换动画的效果。有下面可供选择.

             Linear:线性渐变

             ease:逐渐变慢

             ease-in：先慢后快

             ease-out:先快后慢

             ease-in-out:先慢后快再慢

             cubic-bezier:使用贝塞尔曲线指定效果

        4、指定动画执行之前需要等待多长时间，不设定时表示马上执行。

       举例:当鼠标悬停时盒子旋转

       .box:hover{ transform: rotate(30deg);  transition: transform 0.5 ease-out;}

       animation更接近动画的含义。与想对于transition通过指定属性从起始值到终止值平缓的过渡的效果不同，animation可以设置更多的帧的效果，把这些帧组合、变换按动画的效果显示出来。animation有6个属性:animation-name、animation-duration、animation-delay、animation-timing-function、animation-iteration-count、animation-direction。这里还有类似flash的关键帧的属性keyframe。

        keyframe的格式:  

       @keyframe 动画标识名{//每一帧的效果}

        动画标识名被animation的animation-name属性所引用，每一帧通过百分比数值加样式来定义

       

 1 0%{
 2 
 3               background-color:black;
 4 
 5        }
 6 
 7      50%{
 8 
 9               background-color:gray;
10 
11        }
12       100%{
13               background-color:white;
14 
15        }

       百分值看成时间轴的某一点，其实很好理解。

        animation-name：对应keyframe，比如animation-name为begin那么动画就对应@keyframe begin。

        其他与transition有类似的属性使用方法与功能都一样。

      这里需要注意的是多出来的几个属性。

      animation-iteration-count表示动画循环的次数。可以用infinite来表示无限循环动画。

      animation-direction定义为动画播放的方向，默认值为normal代表每次动画都向前播放。alternate表示偶数次动画向前播放，奇数次向后播放。

      结合transition属性实现一些效果：

     

 .loading{
2     animation :load 1s linear infinite;
3 }
4 @keyframe{
5     100%{
6         transform:rotate(360deg);
7     }
8 }

           让需要发生动画的元素添加loading类即可