Question

我有这个简单的加载指示器：

https://jsbin.com/putuloledu/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Load indicator slowing down</title>
</head>
<body>
  <style>
    .timeIndicator {
    height: 5px;
    width: 0;
    background: #12b3c4;
    animation-name: indicator-load;
    animation-duration: 7s;
}

@keyframes indicator-load {
    from {
        width: 0;
    }
    to {
        width: 200px;
    }
}
    </style>
<div class="timeIndicator"></div>
</body>
</html>

应该显示一个自我增长的矩形指示器，它会均匀生长，然后以200px的宽度停止。

可以看出，无论如何都不会增加宽松。

为什么动画最后会慢下来，如何禁用动画从头到尾都是如此？

Answer 1

如果我理解正确，那么您可能需要使用animation-timing-function:linear 我在这里做了

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Load indicator slowing down</title>
</head>
<body>
  <style>
    .timeIndicator {
    height: 5px;
    width: 0;
    background: #12b3c4;
    animation-name: indicator-load;
    animation-duration: 7s;
    animation-timing-function: linear;
}

@keyframes indicator-load {
    from {
        width: 0;
    }
    to {
        width: 200px;
    }
}
    </style>
<div class="timeIndicator"></div>
</body>
</html>

＆＃13;

Answer 2

查找animation-timing-function animation属性。

为什么基于关键帧的动画最终会变慢？

2 个答案: