steps函数--参数意思和用法

杨九日

于 2019-07-30 17:11:18 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_42835377/article/details/97765013

博客探讨了steps函数的参数含义和使用方法，通过7帧图像示例说明。代码注释解释了参数'start'和'end'在动画过程中的作用。同时提出了关于background-position: 0 0;的问题，讨论它如何定位背景图片，以及为何在展示时显示的是最后一帧而非预期的挥手结束动作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片解释如下，参数意思和用法在代码的注释中

所引用图片共7帧，如下：
在这里插入图片描述
尺寸为200*1400，所以设置div为200*200，分为7帧，除去展示帧，需六次步骤跳转，原图如下：

代码：
参数如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Step 步进函数</title>
    <style>
    .hello {
      width: 200px;
      height: 200px;
      border: 2px solid #ccc;
      background: url(images/step-animation.png) no-repeat 0 -1200px;
      -webkit-transition: background-position 0s -.3s steps(6, start);
      /*
      start（不匀速，每帧都是直接跳到每帧结尾处等待每帧时间结束）：以左侧端点为起点，立即
      跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续
      时间结束。后面的每一帧都将按照此模式来完成动画。
      end（不匀速，保持开始状态，直接跳转到下次开始状态）:动画执行时，在每一帧里，动画保