个回答

• 迷途的马尔斯

  2015-12-18 19:34:37

  已采纳

  首先你要明白"@keyframes"是出自CSS3的animation属性的，这是一个关键帧动画。

  • 首先你应该给你的动画写好一个框架，像这样：

  div{                        //attr表示标签名，随便一个标签都可以
      animation-name: change;    //随便起一个名字
      animation-duration: 5s;    //这是过渡时间，即你的动画有多少秒
      animation-timing-function: linear;    //这是过渡方式，linear表示平滑的，还有其它的自行查找吧
  }

  • 接下来就是描述你的关键帧动画了

  @keyframes change{    //如果是Chrome浏览器的话就是@-webkit-开头，Firefox就是@-moz-开头
      0%{
          backgound-color: red;    //我这里写了颜色的变化，想什么动画都可以随便写
      }
      50%{
          background-color: blue;
      }
      100%{
      background-color: yellow;
      }
  }

  
  

  1

• 狂飙的蜗牛_1

  2015-12-18 17:11:28

  要加上webkit，moz等前缀，以适应各浏览器兼容性
  @-webkit-keyframes bird-slow{
          0%{
              background-position-x:0;       //动画开始时的状态
          }
          100%{
              background-position-x:-300%;          //动画结束时的状态
          }
          }

  
  

  0