CSS3アニメーションとtransition_html/css_WEB-ITnoseに関する問題

アニメーショントランジション

アニメーションはパーセントのスタイルを設定できます。トランジションは0％と100％のスタイルを設定し、途中でスタイルを変更するにはどうすればよいですか？アニメーションのアニメーションはトランジションのように再生を制御しますか? ボタンをクリックしたときにのみ再生され、更新せずに複数回クリックすると複数回再生されます
アニメーションを制御することはできません。常に再生するか、再生回数を設定する必要があります。再生中はユーザーが制御できません

スタイル名を制御および変更できます

アドバイスを求めてください

スタイル名を制御および変更できます

アドバイスを求めてください
ユーザーが再生の開始を制御します。これは何を意味しますか?

<style>div{opacity:0;position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px 0 0 -150px;}.over{border:3px solid #eee;background:#e0e0e0;} .over{	-webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	-ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;	animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;}@-webkit-keyframes animations{	0%{-webkit-transform:scale(0);opacity:0;}	40%{-webkit-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-moz-keyframes animations{	0%{-moz-transform:scale(0);opacity:0;}	40%{-moz-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-o-keyframes animations{	0%{-o-transform:scale(0);opacity:0;}	40%{-o-transform:scale(1);opacity:1;}	100%{opacity:1;}}@-ms-keyframes animations{	0%{-ms-transform:scale(0);opacity:0;}	40%{-ms-transform:scale(1);opacity:1;}	100%{opacity:1;}}@keyframes animations{	0%{transform:scale(0);opacity:0;}	40%{transform:scale(1);opacity:1;}	100%{opacity:1;}}  </style>  <div class="over" id="test" ></div><button onclick="fn()" >test</button><script>	var div=document.getElementById('test');	function fn(){		div.className='';		setTimeout(function(){			div.className='over';		},50);			}	</script>		

アニメーションは使用できません 制御は、常に再生するか、再生回数を設定するかのいずれかですユーザーは再生を制御できません

ここで setTimeout がどのような役割を果たしているのかお聞きしたいのですが、ボタンをクリックしても効果がありません。ありがとうございます

スタイルの変更を制御できます。名前

ここでの setTimeout の役割についてお聞きしたいのですが、ボタンが消えているのになぜクリックしてしまうのでしょうか? ありがとうございます
これはブラウザの処理に関係があるのか​​もしれません。頻繁すぎると最後にしか操作しないので setTimeout を使う必要があります
スタイル名の変更を制御できます

そのスタイルが表示されないようにするにはどうすればよいですか。最後の質問です

スタイル名を制御して変更することができます

わかりました。これが最後の質問です。ありがとうございます
いいえ、意味はわかります。例 #4 は再生後に常に表示されませんか?
スタイル名を制御して変更できます
理解しました。最後の質問です。意味がよくわかりませんが、#4 は再生後に必ず表示されます。もう一度ボタンを押すとゆっくりと表示され、100% に達すると div が非表示になります

ごめんなさい、テストポイントが早すぎて見えませんでした
最終状態を追加するだけです。メインスタイル

.over{    -webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    -ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;    animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;   opacity:1; /* 加上最后状态*/}

anime-fill-mode: forwards