CSS - animation-fill-mode

概要

属性名 animation-fill-mode
値 <single-animation-fill-mode> [, <single-animation-fill-mode> ]*
値の詳細 <single-animation-fill-mode> = none | forwards | backwards | both
初期値none
適用可能要素すべての要素 (::before, ::after を含む)
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3105(-moz)
16		4(-webkit)
43		15(-webkit)
30		4(-webkit)
9

説明

アニメーション開始時、終了時のスタイルの適用ルールを指定します。アニメーションに関する概要は animation を参照してください。

値説明
none開始時、終了時にはアニメーションスタイルは適用されません。
forwards終了時に、アニメーション終了時のスタイルを適用したままにします。
backwards開始時に、アニメーション開始時のスタイルを適用します。animation-delay が指定された場合に、遅延時間の間、開始時のスタイルが適用されます。
both開始時には開始時のスタイルが、終了時には終了時のスタイルが適用されます。

使用例

CSS
@keyframes myframe {
  from {
    color: #66f;
    font-size: 20pt;
  }
  to {
    color: #f66;
    font-size: 24pt;
  }
}
.test {
  position: absolute;
  animation-name: myframe;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: alternate;
  animation-fill-mode: both;
}
HTML
<div class="test">A</div>
表示
A

関連項目

@keyframes, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

リンク

Copyright (C) 2015 杜甫々
初版：2015年11月29日、最終更新：2015年11月29日
https://www.tohoho-web.com/css/prop/animation-fill-mode.htm