动画范围从0px到...％？

Question

我试图制作一个简单的CSS动画

见小提琴： http://jsfiddle.net/xT8z9/

我需要它保持100％的宽度值，但由于动画，它的回报率为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