WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「アニメーションの再生前後のスタイル」

animation-fill-mode 「アニメーション開始と終了時の状態指定」

「animation-fill-mode」は「animation」の開始時と終了時の状態を指定することができます。

CSS Ver.適用要素継承
3.0--
広告

animation-fill-modeの指定方法

プロパティ/設定値開始待ち
animation-delay」の指定時間
終了時
animation-fill-mode : none @keyframes」は適用されない @keyframes」は適用されない
animation-fill-mode : backwards @keyframes」の開始状態(*1) @keyframes」は適用されない
animation-fill-mode : forwards @keyframes」は適用されない アニメーションの最後の状態(*2)
animation-fill-mode : both @keyframes」の開始状態(*1) アニメーションの最後の状態(*2)

(*1)アニメーション開始待ち「animation-delay」が指定されている時の待ち時間に「@keyframes」の開始(0%,form)の状態が適用される

(*2)アニメーション終了時の状態が維持される。「@keyframes」の終了状態(100%,to)ではない。
たとえば、繰返し2回「animation-iteration-count:2」で、終了後逆再生「animation-direction:alternate」が指定されている場合は、アニメーションの終了時は「@keyframes」の開始(0%,form)の状態となる。

デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

animation-fill-mode のサンプル


<style type="text/css">
.div1{
  animation : sample_s1 6s ease 3s 1;
  height : 50px;
  margin : 5px 0; 
  color  : #fff;
  background: #666;
}
.m_none     { animation-fill-mode : none; }
.m_backwards{ animation-fill-mode : backwards; }
.m_forwards { animation-fill-mode : forwards; }
.m_both     { animation-fill-mode : both; }

@keyframes sample_s1 {
  0%   { width: 100px; background: blue; }
  50%  { width: 200px; background: red;  }
  100% { width: 250px; background: green;}
}
</style>

<!-- html -->
<div class="div1">-</div>
<div class="div1 m_none">none</div>
<div class="div1 m_backwards">backwards</div>
<div class="div1 m_forwards">forwards</div>
<div class="div1 m_both">both</div>
-
none
backwards
forwards
both
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン