閉じる
カテゴリー
もっと見る:CSSアニメーション

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

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

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

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

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

フェードイン

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

CSSアニメーション 一覧