<style>

    /*@-webkit-keyframes 动画名称 {}

      用时：-webkit-animation:时间 动画名称;

    */

/*     @-webkit-keyframes move{

    开始时

    0%{width:100px;}

    结束时

    100%{width:500px;}

} */

/*  (2)没有起始时间

@-webkit-keyframes move{

  50%{width:500px;}

} */

/*ease-in 先慢后快  ease-out先快后慢*/

      /*.box{width:100px;height:100px;background:red;-webkit-animation:5s move ease-in;}*/

/*针对火狐浏览器,其他浏览器一样*/

@-moz-keyframes move{

    {width:100px;}

    %{width:300px;}

    %{width:500px;}

}

.box{width:100px;height:100px;background:linear-gradient(to right,red,green);

     -moz-animation:5s move;

}

    </style>