CSS辞典 animation-fill-modeプロパティ、animation-interation-countプロパティ、animation-directionプロパティの解説
アニメーションの再生前後のスタイルを指定する「animation-fill-mode」プロパティ、アニメーションの繰り返し回数を指定する「animation-interation-countプロパティ」、アニメーションの再生方向を指定する「animation-directionプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
目次
対応ブラウザ
animation-fill-modeプロパティ
| 初期値 | none |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Animations Module Level 3 |
| 継承 | なし |
概要・使用方法（スタイル）
{ animation-fill-mode:スタイル ;}「animation-fill-modeプロパティ」は、アニメーションの再生前後のスタイルを指定します。アニメーションが終了した時に最終的なスタイルを適用したりします。
指定できる値（高さ）
| none | アニメーションの再生前後にスタイルを指定しません。 |
| backwards | アニメーションの再生開始前とanimation-delayプロパティによって指定された遅延期限の間に、最初のアニメーション周期開始時のスタイルが適用されます。 対象となるキーフレームは、animation-directionプロパティの値がnormalあるいはalternateの場合fromまたは0％に、 reverseあるいはalternate-reverseの場合はtoまたは100%に変わります。 |
| forwards | animation-iteration-countプロパティの値が正の整数の場合、アニメーションの再生が終止した辞典のスタイルが適用されますが、0の場合、 最初のアニメーション周期開始時のスタイルが適用されます。 |
| both | backwardsとforwardsキーワードを両方同時に適用します。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>animation-fill-mode:forwardsプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
@keyframes animation1{
0% {width: 10px; background-color: red;}
50% {width: 200px;height: 10px; background-color: blue;}
100% {width: 400px;height: 10px; background-color: red;}
}
.fill-box1{position:relative;}
.fill-box2{
width: 400px;
height: 60pox;
}
.fill-box-bar{
width: 10px;
height: 10px;
position:absolute;
top:50px;
opacity:0.3;
animation-name: animation1;
/* アニメーションの開始時間の遅延 */
animation-duration: 10s;
/* アニメーション変化のタイミング */
animation-timing-function: ease-in-out;
/* アニメーション終了時のスタイル */
animation-fill-mode:forwards;
}
</style>
</head>
<body>
<div class="fill-box1">
<h1 class="fill-box2">夏の危険生物1</h1>
<div class="fill-box-bar"></div>
</div>
<p>夏の危険な生物クラゲといわれる動物。</p>
</body>
</html>夏の危険生物1
夏の危険な生物クラゲといわれる動物。
animation-interation-countプロパティ
| 初期値 | 1 |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Animations Module Level 3 |
| 継承 | なし |
概要・使用方法
{ animation-interation-count: 再生回数;}「animation-interation-countプロパティ」は、アニメーションの再生を繰り返す回数を指定します。このプロパティの初期値は1のため、指定しなければアニメーションは1回だけ再生されると停止しますが、数値を指定することで任意の回数再生を繰り返します。
infiniteを指定した場合は、アニメーションは無限に繰り返されます。
指定できる値（再生回数）
| infinite | アニメーションを制限な繰り返します。 |
| 数値 | 数値で指定します。指定した回数だけアニメーションを繰り返します。数値が整数でない場合、アニメーションは最後の再生周期の途中で終了します。 マイナスの値は指定不可です。0を指定した場合、値としては有効だがアニメーションは瞬時に終了します。 |
animation-directionプロパティ
| 初期値 | normal |
| 適用される要素 | すべての要素（::before疑似要素、::after疑似要素を含む） |
| モジュール | CSS Animations Module Level 3 |
| 継承 | なし |
概要・使用方法
{ animation-direction: 再生方向;}「animation-directionプロパティ」は、アニメーションの周期ごとの再生方向を指定します。なお、逆再生した場合は、「animation-timing-functionプロパティ」の値も逆の動きをとります。
たとえば、ease-inを指定した場合、ease-outの動きをします。
指定できる値
| normal | アニメーションは標準の方向で再生されます。 |
| reverse | アニメーションは逆方向で再生されます。 |
| alternate | アニメーションの繰り返し回数が奇数の場合は、標準の方向、偶数の場合は逆方向で再生されます。 |
| alternate-reverse | アニメーションの繰り返し回数が奇数の場合は、逆方向、偶数の場合は標準方向で再生されます。 |
サンプルコード
「animation-interation-countプロパティ」を指定いるため、5回アニメーション動作を繰り返します。「animation-directionプロパティ」で逆方向からアニメーションを行っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>animation-iteration-countプロパティ、animation-direction: reverseプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
@keyframes animation1{
0% {width: 10px; background-color: red;}
50% {width: 200px;height: 10px; background-color: blue;}
100% {width: 400px;height: 10px; background-color: red;}
}
.iteration-box1{position:relative;}
.iteration-box2{
width: 400px;
height: 60pox;
}
.iteration-box-bar{
width: 10px;
height: 10px;
position:absolute;
top:50px;
opacity:0.3;
animation-name: animation1;
/* アニメーションの開始時間の遅延 */
animation-duration: 10s;
animation-timing-function: ease-in-out;
/* アニメーション実行回数 */
animation-iteration-count:5;
/* アニメーションのの再生方向 */
animation-direction: reverse;
}
</style>
</head>
<body>
<div class="iteration-box1">
<h1 class="iteration-box2">夏の危険生物1</h1>
<div class="iteration-box-bar"></div>
</div>
<p>夏の危険な生物クラゲといわれる動物。</p>
</body>
</html>実行結果
夏の危険生物1
夏の危険な生物クラゲといわれる動物。