css - ページ読み込み時に Css3 遷移を機能させる

Question

重複の可能性:
ロード時の css3 遷移アニメーション?

ページ読み込みの進行状況バーを 0% から 60% までアニメーション化したいと思います。以下の私のフィドルを見つけてください。css の遷移プロパティを試してみましたが、達成できませんでした。

http://jsfiddle.net/meetravi/5zJPr/2/

Jqueryを使用してすでに達成しています。以下のフィドルを見つけてください。 http://jsfiddle.net/meetravi/5zJPr/3/

CSS3ソリューションのみを使用して可能かどうか知りたいですか? ページの読み込み時に CSS3 アニメーションを使用できない場合は? ページの読み込み時に動作させるのではなく、ページ内のイベントがホバーまたはクリックしてアニメーションが発生するのを CSS が待機する理由を明確に説明できる人がいますか?

ありがとう

Answer 1

CSS3 アニメーションを使用してこれを行うことができますが、注意が必要です。これらは広くサポートされていません。更新された jsFiddle を次に示します。

animation: width <duration> <easing>;

@keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}​

Answer 2

JavaScript または jQuery がなければ、これは不可能です。