steps用法

最新推荐文章于 2024-03-19 15:15:09 发布

weixin_30530523

最新推荐文章于 2024-03-19 15:15:09 发布

阅读量875

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/danydong/p/5706520.html

版权

<!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 步 !

转载于:https://www.cnblogs.com/danydong/p/5706520.html

weixin_30530523

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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>...
复制链接

扫一扫