webkit mozillaのアニメーションのためのCSSコールバック

Question

私は30秒のタイマーをシミュレートするために、フルで始まり、空で終了する水平なプログレスバーを持っているようにしています。 つまり、時刻0:30に0:29に進行状況バーがいっぱいになると、プログレスバーはそれに比例して減少するはずです。そう基本的に、これはあなたが答えを知っていれば、私は、このアプローチで

.progress-bar { 
    height: 8px; 
    width: 0; 
    background: -moz-linear-gradient(top, #00679A 0%, #FFFFFF 30%, #00679A 100%); 
    margin: 0px 4px; 
    -moz-animation-duration: 30s; 
    -moz-animation-name: update;  
    } 

@-moz-keyframes update { 
    0% {width: 100%;} 
    50% {width: 50%;} 
    100% {width: 0%;} 
} 

二つの問題を持っているものである

取り扱いアニメーションは苦痛であるので、私はMozillaが

をサポートCSS 3アニメーションを使用することを決定しますこれらのいずれかに、実際に（午前0時30分から午後12時まで）ダウンカウント数値カウンタがあり

1. 返信することを躊躇しないでください、それはと同期してになっています上に貼り付けられたCSSのアニメーションの進行状況バー...しかし、プログレスバーは実際にアニメーションを開始する（一度表示）数値カウンタの前に（javascriptを介して）、私はそれをアニメーションを開始するときに何かを持つことができますか？

2. アニメーションの長さは30秒に設定されていますが、「テンポ」は奇妙に見えますが、速くアニメーションを開始してから遅くなります。数値タイマーあなたには半分以上の時間が残っていますが（15より大きい）、プログレスバーはすでに半分以下になっています....最後には時間0でアニメーションが終了します...それは変です。上記の 'update' cssセレクターの場合、すべてのパーセンテージが0％から100％にハードコードされている方が良いですが、まだ 'テンポ'が正しく表示されません...とにかくこれを修正できますか？問題＃1の

おかげ

Answer 1

、あなたはこのような何かしたいと思うでしょう：問題＃2の

.progress-bar { 
    height: 8px; 
    width: 0; 
    background: -moz-linear-gradient(top, #00679A 0%, #FFFFFF 30%, #00679A 100%); 
    margin: 0px 4px; 
} 

.start-animating { 
    -moz-animation-duration: 30s; 
    -moz-animation-name: update;  
} 

// When you're ready 
$(".progress-bar").addClass("start-animating"); 

を、あなたはlinearへtransition functionを変更したいと思うでしょう。それdefaults to ease：

.start-animating { 
    -moz-animation-duration: 30s; 
    -moz-animation-name: update; 
    -moz-animation-timing-function: linear; 
}