CSS3 - animation的steps属性

最新推荐文章于 2024-08-03 23:03:36 发布

2401w

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量1k

点赞数 2

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/asfcyg/article/details/109394150

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

语法：steps(number , position)

它有两个参数：

1. number：数值

表示我们把动画分成了多少段

比如我们写一个颜色过渡的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      margin: 100px auto;
      background-color: rgb(255, 115, 0);
      animation: run 10s steps(1,start);
    }
    @keyframes run{
      0%{background-color: blue;}
      20%{background-color: red;}
      40%{background-color: yellow;}
      60%{background-color: purple;}
      80%{background-color: green;}
      100%{background-color: rgb(0, 0, 0);}
    }
  </style>
</head>
<body>
  <div>steps(1,start)</div>
</body>

</html>

当 number 值为1，代表我们把 0%-20% 分成一段显示，其它比如 20%-40% 等同理，都分成1段显示，即颜色是一下跳转过去的
在这里插入图片描述大家可能会发现第一个颜色是红色，而不是我设置的蓝色，下面会讲为什么

当 number 值为2，代表我们把 0%-20% 分成2段显示，即，中间有一个过渡色
在这里插入图片描述

当 number 值越大，代表分的段数越多，越像一个流畅的动画，但是它的本质还是帧动画
在这里插入图片描述

2. position

表示动画是从时间段的开头连续还是末尾连续

支持两个关键字：

start
end

1）start

我们可以发现我们上面的例子中用的都是start
结果是：
数值为1时，第一个颜色不显示
数值为2时，第一个颜色显示为紫色，而不是蓝色
数值为100时，第一个颜色显示为蓝色

这是为什么呢？

其实是因为 start 表示从时间段的末尾连续，第一帧被立即执行。当数值越大，动画分的越细，第一帧显示的就越多。

2）end

end表示从时间段的开始连续，即最后一帧被立即执行。当数值越大，动画分的越细，最后一帧显示的就越多。
在这里插入图片描述

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      height: 90px;
      width: 65px;
      background-image: url(https://static.runoob.com/images/mix/space-to-top.png);
      background-position: -40px -44px;
      animation: .6s run steps(7) infinite;
      margin: 100px auto;
    }
    @keyframes run{
      from{background-position: -40px -44px;}
      to{background-position: -1040px -44px;}
    }
  </style>
</head>
<body>
  <div></div>
</body>

</html>

在这里插入图片描述

2401w

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - animation的steps属性

语法：steps(number , position)它有两个参数：1. number：数值表示我们把动画分成了多少段比如我们写一个颜色过渡的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫

专栏目录