CSS3 动画

CSS 用于控制网页的样式和布局CSS3 是最新的 CSS 标准。   CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值.

 例：

.demo1{

             width:50px;

            height:50px;

            margin-left:100px;

           background:blue;

          -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/

          -webkit-animation-duration:10s;/*动画持续时间*/

           -webkit-animation-timing-function:ease-in-out;/*动画频率，和transition-timing-function是一样的*/

           -webkit-animation-delay:2s;/*动画延迟时间*/

           -webkit-animation-iteration-count:10;/*定义循环资料，infinite为无限次*/

           -webkit-animation-direction:alternate;/*定义动画方式*/}

   css3animation动画属性：

   @keyframes规定动画。

        例子：@keyframes myfirst

                {

            from {background: red;}

            to {background: yellow;}}

        @-moz-keyframes myfirst/* Firefox */

         {

       from {background: red;}

       to {background: yellow;}}

       @-webkit-keyframes myfirst/* Safari 和 Chrome */

       {

          from {background: red;}

          to {background: yellow;}}

        @-o-keyframes myfirst/* Opera */

    {

      from {background: red;}

     to {background: yellow;}

       }

    anmation:所有动画属性的简写属性，除了 animation-play-state 属性。

   animation-name:规定需要绑定到选择器的 keyframe 名称.

   animation-duration:规定完成动画所花费的时间，以秒或毫秒计.

   animation-delay:规定在动画开始之前的延迟.

   animation-iteration-count:规定动画应该播放的次数.

   animation-direction:规定是否应该轮流反向播放动画.

  animation-play-state:属性规定动画正在运行还是暂停.

  animation-fill-mode:属性规定动画在播放之前或之后，其动画效果是否可见.

  animation-timing-function:规定动画的速度曲线。