動畫範圍從0px到...％？

Question

我試着做一個簡單的CSS動畫

見琴： http://jsfiddle.net/xT8z9/

我需要它留在100％的寬度值，但由於製作動畫它poofs回到0％。

@-webkit-keyframes meter1 { 
    0% { 
    width:0%; 
    } 

    100% { 
    width:100%; 
    } 
} 

我該如何解決這個問題，我需要javascript還是jQuery？

問候，克里斯

Answer 1

更改animation-fill-mode到forwards，保持最終狀態。

.meter > span { 
    display: block; 
    width:0px; 
    height: 3px; 
    background-color:#0f0; 
    position:relative; 
    top:9px; 
      animation: meter1 1s 1s ease forwards; 
    -webkit-animation: meter1 1s 1s ease forwards; 
     -moz-animation: meter1 1s 1s ease forwards; 
     -o-animation: meter1 1s 1s ease forwards; 
     -ms-animation: meter1 1s 1s ease forwards; 
} 

Updated fiddle

MDN animation-fill-mode documentation