每天进步一点点2021.11.2 css动画的steps运动帧

最新推荐文章于 2024-08-06 04:13:50 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-08-06 04:13:50 发布

阅读量352

点赞数

分类专栏： CSS 文章标签：动画 css css3

本文链接：https://blog.csdn.net/tuzi007a/article/details/121098160

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

steps（n, state）

steps(n, state)简介

steps是animation动画的属性animation-timing-function的一个值。也就是用来控制动画运动方式的。

steps(n, state) 有两个值。

n 表示将单次运动分为几步来完成。而且从每一步都是直接从开始状态跳转到结束状态，而不是连续性的运动。

state表示单次运动的状态。

参数介绍

这么说，会有点模糊，举个例子说说。

现在有一个盒子<div></div>

给他设置一个样式和动画

@keyframes move {
      0% {margin-left: 0px;}
      100% {margin-left: 200px;}
    }
    div {
      width: 30px;
      height: 30px;
      background-color: pink;
      margin-left: 0;
      animation: move 5s steps(10, end) forwards;
    }

move动画总共就一步，即从0px运动到200px。结束

step中的第一个参数n，就表示把这一步拆分成几段来完成。

如例子所示，steps(10, end) 就表示把总共运动的200px拆分成10段，分10次运动，每次运动是20px

相当于把

0% {margin-left: 0px;}
100% {margin-left: 200px;}

变成了

0% {margin-left: 0px;}
10% {margin-left: 20px;}
20% {margin-left: 40px;}
...
90% {margin-left: 180px;}
100% {margin-left: 200px;}

再说说参数state

state就是动画开始前，动画是在第一段结束的开始位置还是结束位置

state的值是start，就表示动画开始前，动画就从第一段的结束位置开始。

也就是说，动画是从10% {margin-left: 20px;}的位置开始的。（可以简单这样理解）

state的值是end，就表示动画开始把第一段结束的位置当作自己这一步的结束位置。

也就是动画从0% {margin-left: 0px;}开始，第一步是到10% {margin-left: 20px;}结束。

看个例子，发现不同

不用steps时的运动形式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes move {
      0% {margin-left: 0px;}
      100% {margin-left: 200px;}
    }
    div {
      width: 30px;
      height: 30px;
      background-color: pink;
      margin-left: 0;
      animation: move 5s forwards;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

用steps的运动形式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes move {
      0% {margin-left: 0px;}
      100% {margin-left: 200px;}
    }
    div {
      width: 30px;
      height: 30px;
      background-color: pink;
      margin-left: 0;
      animation: move 5s steps(10, end) forwards;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>