css动画篇——@keyframes用法

语法

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes 后面跟上自定义的动画名字，意思就是声明一种css规则，规则内部写上动画对应的变化过程，动画会循环播放。示例：

<!DOCTYPE html>
<html>
<head>
  <title>动画</title>
  <style type="text/css">
  @keyframes move_down{
    from{top:0px;}
    to{top:200px;}
  }
    div{
      width: 200px;
      margin:0 auto;
    }
    img{
      width: 300px;
      position: relative;
      animation:move_down 3s infinite;
    }
  </style>
</head>
<body>
  <div>
    <img src="http://pic15.nipic.com/20110802/7952036_150022311128_2.jpg">
  </div>
</body>
</html>

 @keyframes move_down{   定义动画名称为move_down
    from{top:0px;}     从top值0 到 top值200，还有其他表示方法，目的是一样的。
    to{top:200px;}
  }

animation:move_down 3s infinite; 第一个参数是自己设定的变化规则，然后是执行一次的时间，最后是动画速度曲线。
animation提供了多个值，上面只是用了三个，完整语法是这样的：


详细的直接去这里看http://www.w3school.com.cn/cssref/pr_animation.asp

posted on 2018-04-08 21:07 漏三刀阅读(972) 评论(0) 编辑收藏举报