正確計時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％的工作方式在動畫中，這可能會影響！