JavaScriptによるCSS3アニメーションの進捗状況の変更

Question

CSS3アニメーションの「進捗状況」を操作できるかどうかは疑問です。

#myBox { 
    animation: fadein 2s ease-in-out 0 1 forwards; 
} 
@keyframes fadein { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

今すぐページが読み込まれた後、 #myBoxは opacity: 0;を持っていますし、2秒後には opacity: 1;があります：あなたは次のCSSを持っているとしましょう。どういうわけかJavaScriptでアニメーションの進行を「操作する」ことはできますか？アニメーションを50％で開始したいので、ページ読み込み時に opacity: 0.5;になり、1秒後に opacity: 1;

どのようにすればいいですか？

Answer 1

ジャスト例えばキーフレーム、変更：

//this will start at 0.5 and keep it half way (1 second) and then aniate the fade to 1 
 

 
@keyframes fadein { 
 
    0% { 
 
    opacity: 0.5; 
 
    } 
 
    50% { 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
//you can do all sorts like blinking etc 
 

 
@keyframes fadein { 
 
    0% { 
 
    opacity: 0.5; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 

 
    50% { 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}