CSSアニメーション適用例
基本モーション

CSSの@keyframesとanimationプロパティを使用すれば、JavaScriptを使わなくても、ウェブページ上でさもざもなモーションやアニメーションを実装できます。

ここでは、CSSアニメーションで簡単に実装できる基本モーションを例としてあげてみます。適用対象はpタグで（pタグのCSSプロパティは初期値です）、DEMOごとにクラス名をつけています。

各プロパティの値を自由にいじってみると、値がどのようにモーションを決定するのか体感できます。

こちらもどうぞ

フェードイン

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

opacity（不透明度）が0から1になることでフェードインになります。

フェードアウト

CSS

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

上記では、対象となる要素がそもそも透明ではないため、0%時のopacityは設定していません。

再生回数が有限の場合

重要なポイントとして、アニメーションの終了時、要素にはもともと指定されているプロパティの値が反映されます。つまり、アニメーションの再生回数が1回、2回と有限である場合は、最終的にopacityの値が戻ってしまい、通常は要素が表示されたままになっていまいます（例）。

これを解消するには、アニメーションを適用する要素のopacityをはじめから0にしておき、またアニメーション0%時で1にしておきます。

CSS

@keyframes fadeOutLimited {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOutLimited {
  animation-name: fadeOutLimited;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  opacity: 0;
}

DEMO

あわせて知っておきたい

フェードインもフェードアウトもopacity（不透明度）の値を調節することで実現できます。

opacityを使う場合は、その要素が消えてなくなるわけではないので、透明であっても選択したり、検索したりすることができます。

完全な非表示には通常display: none;を使うので、この場合はJavaScriptでdisplayの値をいじります。

フェードイン＆アウト

CSS

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeInOut {
  animation-name: fadeInOut;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

拡大

CSS

@keyframes getBigger {
  0% {
    font-size: 10px;
  }
  100% {
    font-size: 50px;
  }
}

.getBigger {
  animation-name: getBigger;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

縮小

CSS

@keyframes getSmaller {
  0% {
    font-size: 50px;
  }
  100% {
    font-size: 10px;
  }
}

.getSmaller {
  animation-name: getSmaller;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

拡大＋フェードイン

CSS

@keyframes getBiggerWithFadeIn {
  0% {
    font-size: 10px;
    opacity: 0;
  }
  100% {
    font-size: 50px;
    opacity: 1;
  }
}

.getBiggerWithFadeIn {
  animation-name: getBiggerWithFadeIn;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

縮小＋フェードアウト

CSS

@keyframes getSmallerWithFadeOut {
  0% {
    font-size: 50px;
  }
  100% {
    font-size: 10px;
    opacity: 0;
  }
}

.getSmallerWithFadeOut {
  animation-name: getSmallerWithFadeOut;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

DEMO

逆再生する

animation-directionプロパティの値にreverseを取ると、逆再生することができます。

つまり、フェードインを逆再生してフェードアウト、拡大を逆再生して縮小を実現することもできます。

フェードインを逆再生（フェードアウト）

CSS

@keyframes fadeInReversed {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeInReversed {
  animation-name: fadeInReversed;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

DEMO

拡大を逆再生（縮小）

CSS

@keyframes getBiggerReversed {
  0% {
    font-size: 10px;
  }
  100% {
    font-size: 50px;
  }
}

.getBiggerReversed {
  animation-name: getBiggerReversed;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

DEMO