CSSプログレスバーアニメーション

Question

私は50％の幅で塗りつぶされるべきプログレスバーを持っています。 これは現在進行中のhtmlとcssです。

HTML：

<div id="ProgressBar"> 
    <div id="Progress"></div> 
</div> 

CSS：

#ProgressBar { 
    width: 100%; 
    height: 30px; 
    border: 1px solid black; 
    border-radius: 7px; 
    padding: 4px; 
} 

#Progress { 
    width: 10%; 
    background-color: #4A90E2; 
    height: 100%; 
    border-top-left-radius: 7px; 
    border-bottom-left-radius: 7px; 
    border-color: #4A90E2; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
} 

#Progress:hover { 
    width: 50%; 
} 

あなたは移行が進行超えるホバー後に開始されて見ることができるように。私の目標は、ページが読み込まれた直後からこの移行を開始することです。私はインターネットにいくつかの例があることを知っていますが、それらはすべてフェードイン効果しか持たず、私はそれを理解できません。 私はあなたの助けに感謝します。

ここに私のバイオリン：

https://jsfiddle.net/Anokrize/ssL9fjy9/

（それが可能であるならば、私は、任意のjavascriptやjqueryのを避けたい）

Answer 1

どのようにこのように、キーフレームでそれをやっについて：

#ProgressBar { 
 
    width: 100%; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
    border-radius: 7px; 
 
    padding: 4px; 
 
} 
 

 
#Progress { 
 
    width: 50%; 
 
    background-color: #4A90E2; 
 
    height: 100%; 
 
    border-top-left-radius: 7px; 
 
    border-bottom-left-radius: 7px; 
 
    border-color: #4A90E2; 
 
    
 
    animation-name: progressBar; 
 
    animation-iteration-count: 1; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes progressBar { 
 
    0% { 
 
    width: 10%; 
 
    } 
 
    
 
    100% { 
 
    width: 50%; 
 
    } 
 
}

<div id="ProgressBar"> 
 
    <div id="Progress"></div> 
 
</div>

Answer 2

これは終らのまっすぐ進む道はjqueryの経由です：

$(window).load(function() { 
    $("#Progress").css("width", "50%"); 
}); 

Answer 3

それが実際に進歩を見せているので、通常、あなたがプログレスバーを送り何かをしたいと思います...しかし、あなたはちょうどそれが負荷に開始したい場合は、キーフレームにanimationプロパティを使用できます。

#ProgressBar { 
    width: 100%; 
    height: 30px; 
    border: 1px solid black; 
    border-radius: 7px; 
    padding: 4px; 
} 

#Progress { 
    width: 10%; 
    background-color: #4A90E2; 
    height: 100%; 
    border-top-left-radius: 7px; 
    border-bottom-left-radius: 7px; 
    border-color: #4A90E2; 
    animation: progress 1s ease-out forwards; 
} 

@keyframes progress { 
    from { width: 10%; } 
    to { width: 50%; } 
}