正确计时CSS动画

Question

我正在构建一个简单的仅限CSS的加载器，除了一件事情之外，它运行良好。它开始有点慢。它不错，到最后会放慢一点。

我的动画代码：

@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/

看到这个链接有关的定时功能， 通常我用装载机计时功能linear，你有ease-in，你可以看到它的链接

你也忘了100％的工作方式在动画中，这可能会影响！