【CSS】フワッと表示してスムーズに消える点滅アニメーションの作成方法｜フェードイン＆フェードアウトを同時に指定(fadeIn, fadeout, animation, animation-name)｜@keyframesとは何か？

CSSを使って通常の fadeIn（フェードイン） で無限の繰り返しをすると、表示はスムーズでも、消えるときにパッと急になくなってしまい動きが不自然です。

ここでは、アイコンや画像をフワッと表示させて、フワッと消えていく処理を繰り返す方法についてまとめています。

結論

結論からいうと、ポイントは animation-direction:alternate; を設定することです。

animation-directionとは、アニメーションの再生方向を指定するプロパティで、値を「alternate」にすると、アニメーションを毎回反転させる処理をします。

このため、アニメーションで fadeInの無限繰り返しを指定していれば、ふわっと表示されて、ふわっと消える処理を繰り返します。

CSSコード

CSSのコードは以下のようになります。

<style>
.repeat-fadein-out{
  animation-name: smooth-fadein-out;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes smooth-fadein-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
</style>

コードの概要

• animation-name: アニメーションの名前は「smooth-fadein-out」とする
• animation-duration: アニメーションの持続時間は1.5秒
• animation-timing-function： 後半でゆっくりになる動き
• animation-delay：アニメーションが開始されるまでの遅延はなし
• animation-iteration-count：繰り返しは無限
• animation-direction： アニメーションの方向は順方向と逆転の繰り返し

上記のアニメーションに対して、@keyframesで開始時点の不透明度が０（非表示）、アニメーション終了時点の不透明度が１（完全に表示）としています。

コードの詳細

コードの中身を見ると何やら大量のプロパティが記述してあるので、サッと眺めただけだと拒否反応が出る人もいるかと思います。

ですが、一つ一つの指定は単純なので、1個づつ見ていけば何をしているかを理解することができます。

CSSのアニメーションは大きく(１) animationと、(２) @keyframesの２つのパートに分かれます。

animation

animationプロパティはCSSでアニメーションを指定するときに使うプロパティです。marginやpadding, backgroundなどのプロパティと同様に、複数のプロパティをまとめて設定しています。

1つのプロパティでより細かい複数のプロパティをまとめて設定できるプロパティのことを「ショートハンドプロパティ」と呼びます。（ショートハンド（shorthand）は縮めたという意味です）

具体的には、animationプロパティの中には以下の8個のプロパティが含まれています。

例１：全ての値を指定

それぞれの値を全て指定した場合の例は以下のようになります。

animation: 3s ease-in 1s 2 reverse both paused slidein;

それぞれ、duration, easing-function, delay, iteration-count, direction, fill-mode, play-state, nameの値になります。

例２：部分的に指定

animationで全ての値を記述する必要はありません。以下のように不要なプロパティは省略して記述することができます。

/* name | duration | easing-function | delay */
animation: slidein 3s linear 1s;

/* name | duration */
animation: slidein 3s;

記述しない値にはデフォルト値が適用されます（上記表参照）。

@keyframes

@keyframesは見慣れないので最初は戸惑いやすいものです。注意したい点はプロパティではなく、セレクタの部分で使用するということです。

CSSのメディアクエリ（@media screen and (max-width 767px)）と同様の位置づけです。

@keyframesの基本的な書き方

通常の使い方は以下のようになります。

@keyframes アニメーション名 {
  0% { プロパティ名: 値; }
  100% { プロパティ名: 値; }
}

アニメーション名にはanimation-nameプロパティで指定した値が入ります。

アニメーション開始前を0%、アニメーション完了後を100%として、それぞれの状態におけるCSSを記述します。

実例１

例えば、以下のようなCSSの場合、animation-nameが「smooth-fadein-out」というアニメーションの開始時点の状態は非表示（不透明度0）、アニメーションが完了したときは表示（不透明度１）となります。

@keyframes smooth-fadein-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

実例２

例えば、以下のようなCSSの場合、animation-nameが「expand-animation」というアニメーションの開始時点の状態は長さ50px、アニメーションが完了したときは長さ（100%）となります。

@keyframes expand-animation {
	0% {width: 50px;}
	100% {width: 100%;}
}

@keyframesで段階の状態指定

上記ではアニメーションの開始と終了の0%と100%を指定しましたが、それ以外の細かい％も指定することができます。

例えば以下の場合、0%, 30%, 68%, 72%, 100%時点の状態を指定しています。

@keyframes アニメーション名 {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

実例

• topの動き： 0 → 50px → 100px
• leftの動き： 0 → 50px → 50px → 100%

<style>
.test-keyframe-top-left{
  animation-name: top-left-move-test;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  position: relative;
}

@keyframes top-left-move-test {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
</style>

animation-direction: alternate;がないとどうなるか？

本題に戻り、フワッと表示してスムーズに消える点滅アニメーションを作成するときに、「animation-direction: alternate;」を指定しない場合、animation-directioinはデフォルト値の「normal」が適用されます。

つまり、@keyframesで指定した 0%→100%の状態になったあと、0%に戻ります。このため、突然消えたような動きになってしまいます。

全然フワッとしていない点滅です。

<style>
.repeat-just-fadein{
  animation-name: not-smooth-fadein-out;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes not-smooth-fadein-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
</style>

animation-direction: alternate;ありの場合

「animation-direction: alternate;」を指定すると、@keyframesで指定した、0%→100% 100%→0% といったように、アニメーションの開始値と終了値が交互に繰り返されるためスムーズに動くようになります。

<style>
.repeat-fadein-out{
  animation-name: smooth-fadein-out;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes smooth-fadein-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
</style>

たった一つのプロパティの値が異なるだけですが、全然違った印象のアニメーションになることがわかります。

animationの各プロパティの重要さが実感できます。