CSS3關鍵幀進度條

Question

當您看到小提琴時，您會看到動畫以某種方式跳動。 它應該從左到右到100％寬度，然後在右側擠壓回0％寬度。如何解決這個問題？

http://jsfiddle.net/j44gbwna/

div:after { 
    content: "";   
    height: 3px; 
    background: red;   
    position: absolute; 
    animation: loader 2s; 
    -webkit-animation: loader 2s; 
    animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
    transition-timing-function: linear; 
    -webkit-transition-timing-function: linear; 
    bottom: 0px;   
    margin-left: 0; 
} 

@keyframes loader { 
    0% {left: 0px;} 
    99% { left: 100%;} 
} 

@-webkit-keyframes loader { 
    0% {width: 0%;left:0;} 
    50% { width: 100%;} 
    99% { width: 0%;right:0;} 
} 

Answer 1

在做CSS關鍵幀動畫，嘗試定義儘可能多的屬性你可以在所有的步驟，因爲當你引入一個新的屬性中旬的動畫，它通常需要默認/初始值是有時你希望的不同：

@-webkit-keyframes loader { 
    0% {width: 0%;left:0;right:0} 
    50% { width: 100%;left:0;right:0} 
    99% { width: 0%;left:100%;right:0} 
} 

http://jsfiddle.net/j44gbwna/3/

div:after { 
 
\t content: ""; 
 
\t /* width: 40px; */ 
 
    height: 3px; 
 
    background: red; 
 
    
 
\t position: absolute; 
 
    animation: loader 2s; 
 
    -webkit-animation: loader 2s; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
    transition-timing-function: linear; 
 
    -webkit-transition-timing-function: linear; 
 
\t bottom: 0px; 
 
    
 
\t margin-left: 0; 
 
} 
 

 
@keyframes loader { 
 
    0% {width: 0%;left:0;right:0} 
 
    50% { width: 100%;left:0;right:0} 
 
    99% { width: 0%;left:100%;right:0} 
 
} 
 

 
@-webkit-keyframes loader { 
 
    0% {width: 0%;left:0;right:0} 
 
    50% { width: 100%;left:0;right:0} 
 
    99% { width: 0%;left:100%;right:0} 
 
}

<div></div>

Answer 2

我想出了這樣一個同時玩耍。不完全是你在找什麼（這是在第二個代碼片段），但它產生一個整潔的小效果。

@-webkit-keyframes loader { 
    0% {width: 0%;right: 100%;} 
    50% { width: 100%;} 
    99% { width: 0%; right:0;} 
} 

div:after { 
 
\t content: ""; 
 
\t /* width: 40px; */ 
 
    height: 3px; 
 
    background: red; 
 
    
 
\t position: absolute; 
 
    animation: loader 2s; 
 
    -webkit-animation: loader 2s; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
    transition-timing-function: linear; 
 
    -webkit-transition-timing-function: linear; 
 
\t bottom: 0px; 
 
    
 
\t margin-left: 0; 
 
} 
 

 
@keyframes loader { 
 
    0% {left: 0px;} 
 
    99% { left: 100%;} 
 
} 
 

 
@-webkit-keyframes loader { 
 
    0% {width: 0%;right: 100%;} 
 
    50% { width: 100%;} 
 
    99% { width: 0%; right:0;} 
 
}

<div></div>

它與事實，你想要進行動畫，而您沒有定義開始值的屬性（right）（和方式left和right值做在position: absolute元件上處理）。它變得複雜。最容易做的事情是要始終在100％的寬度，只需使用變換來顯示正確的裝載機：

div { 
 
    overflow:hidden; 
 
    position: absolute; 
 
    bottom:0; left:0; right:0; 
 
    height: 4px; 
 
} 
 

 
div:after { 
 
\t content: ""; 
 
\t /* width: 40px; */ 
 
    height: 3px; 
 
    background: red; 
 
    
 
\t position: absolute; 
 
    animation: loader 2s; 
 
    -webkit-animation: loader 2s; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
    transition-timing-function: linear; 
 
    -webkit-transition-timing-function: linear; 
 
\t bottom: 0px; 
 
    left:0; width:100%; 
 
\t margin-left: 0; 
 
} 
 

 
@-webkit-keyframes loader { 
 
    0% {transform: translateX(-100%);} 
 
    100% {transform: translateX(100%);} 
 
}

<div></div>