steps用法 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>step</title>
</head>
<style>
  div{width:500px; height:500px; margin:0 auto; padding:0; border:5px solid #090; border-radius:50%; position:relative;}
  i{display:block; width:6px; height:20px; background:#f00; box-shadow:1px 1px 2px #666; position:absolute; top:-10px; left:50%; margin-left:-3px; transform-origin:0 260px; transform: rotate(0deg); animation: run 5s steps(10) infinite;}
  @keyframes run{
      to{transform: rotate(360deg);}
      }
</style>  
<body>
    <div>
       <i></i>
    </div>
</body>
</html>

 

steps用法

简单地说，就是原本一个状态向另一个状态的过渡是平滑的，steps可以实现分布过渡。steps用法 :

steps(n,[start | end])

n是一个自然数，steps函数把动画分成n等份。

  • step-start 等同于 steps(1,start) ，动画分成 1 步，动画执行时以左侧端点为开始
  • step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始

     默认为 end

辨析steps

steps(4,start) 与 steps(1,start) 的最大区别就是每次动画”跳跃”的时候，即从 0% -> 25% 的时候，steps(1) 直接一步到位，瞬间从0%的状态跳到25%的状态，而steps(4)会逐渐走4步，即从 0% -> 25% 要跳 4 步 !

 

posted @ 2016-07-26 10:33  danydong  阅读(681)  评论(0)  编辑  收藏  举报