正确计时 CSS 动画

Question

我正在构建一个简单的 CSS-only 加载程序，除了一件事，它运行良好。它开始有点慢。还不错，到了尽头有点慢了。

我的动画代码：

@include keyframes(border-animation) {
  0% {
    border: 10px solid transparent;
    border-right: 10px solid black;
  }

  25% {
    border: 10px solid transparent;
    border-bottom: 10px solid;
  }

  50% {
    border: 10px solid transparent;
    border-left: 10px solid;
  }

  75% {
    border: 10px solid transparent;
    border-top: 10px solid;
  }
};

示例可在此处找到：http://codepen.io/kinetikc/pen/MwvyxL

注意它是如何运行良好的，当它需要再次运行时，它会停止一小会儿。

如何正确设置时间？

Answer 1

你可以试试，改变动画的计时功能

http://matthewlein.com/ceaser/

看到这个link关于定时功能，通常我将计时功能 linear 与装载机一起使用，你有 ease-in 你可以在 link

中看到它是如何工作的

还有你忘了动画里的100%，这个可能会影响！

正确计时 CSS 动画

Properly timing CSS animation

css

css-animations