お問い合わせ
お問い合わせ
ホーム > CSS > CSSアニメーションの基本と使い方を解説

CSSアニメーションの基本と使い方を解説

CSS
CSSアニメーションの基本をイメージした、動きのあるUI要素とコードエディタを表現したイラスト
CSSアニメーションの基本と使い方を初心者向けに解説。@keyframesやanimationプロパティ、フェードインやスライドインなどの代表的なアニメーションの実装方法を紹介。

Webサイトに動きを加えることで、視覚的なわかりやすさや操作性の向上につながります。

CSSアニメーションを使えば、JavaScriptを使わなくても要素を滑らかに動かしたり、フェードインさせたりすることができます。

この記事では、CSSアニメーションの基本から実践的な使い方まで、初心者でも理解できるように解説します。

CSSアニメーションとは

CSSアニメーションとは、CSSだけで要素の見た目を変化させる機能です。

例えば、以下のような表現が可能です。

  • フェードイン
  • スライドイン
  • 回転
  • 拡大・縮小
  • 点滅
  • 色の変化

JavaScriptを使わなくても実装できるため、比較的簡単に動きを追加できます。

CSSアニメーションを構成する2つの要素

CSSアニメーションは、次の2つで構成されています。

  1. @keyframes
  2. animationプロパティ

@keyframesとは

@keyframesでは、アニメーションの変化の内容を定義します。

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

この例では、透明な状態から徐々に表示されるアニメーションを定義しています。

animationプロパティとは

animationプロパティで、作成したアニメーションを要素に適用します。

.box {
  animation: fadeIn 1s;
}
  • fadeIn：アニメーション名
  • 1s：実行時間

この2つを組み合わせることでアニメーションが動作します。

CSSアニメーションの基本構文

.box {
  animation: 名前 時間 タイミング関数 遅延時間 繰り返し回数;
}

例えば次のように指定できます。

.box {
  animation: fadeIn 1s ease 0s 1;
}

省略して書くこともできます。

.box {
  animation: fadeIn 1s;
}

animationプロパティの主な種類

animation-name

アニメーション名を指定します。

.box {
  animation-name: fadeIn;
}

animation-duration

アニメーションの実行時間です。

.box {
  animation-duration: 2s;
}

animation-delay

開始までの待ち時間を指定します。

.box {
  animation-delay: 1s;
}

animation-iteration-count

繰り返し回数を指定します。

.box {
  animation-iteration-count: infinite;
}

infiniteを指定すると無限に繰り返します。

animation-direction

アニメーションの向きを指定します。

.box {
  animation-direction: alternate;
}

alternateを指定すると、往復運動になります。

animation-fill-mode

アニメーション終了後の状態を保持します。

.box {
  animation-fill-mode: forwards;
}

animation-timing-functionとは

アニメーションの速度変化を指定するプロパティです。

linear

一定速度で動きます。

.box {
  animation-timing-function: linear;
}

ease

最初と最後がゆっくりになります。

.box {
  animation-timing-function: ease;
}

ease-in

徐々に加速します。

.box {
  animation-timing-function: ease-in;
}

ease-out

徐々に減速します。

.box {
  animation-timing-function: ease-out;
}

ease-in-out

加速してから減速します。

.box {
  animation-timing-function: ease-in-out;
}

フェードインアニメーションの作り方

もっともよく使われるアニメーションです。

CSS

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.box {
  animation: fadeIn 1s ease forwards;
}

HTML

<div class="box">
  テキスト
</div>

表示時にゆっくり現れます。

スライドインアニメーションの作り方

左から要素を移動させる例です。

CSS

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 1s ease forwards;
}

HTML

<div class="box">
  テキスト
</div>

回転アニメーションの作り方

transform: rotate()を利用します。

CSS

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.box {
  animation: rotate 2s linear infinite;
}

HTML

<div class="box">
  回転
</div>

transformと組み合わせると表現の幅が広がる

CSSアニメーションでは、transformと組み合わせることが非常に多くあります。

主なものは以下の通りです。

  • translate
  • scale
  • rotate
  • skew

詳しくは、

「CSS transformとは？translate・scale・rotateの使い方を解説」

も参考になります。

transitionとの違い

よく似た機能として、CSSトランジションがあります。

transition

  • ホバー時などの変化に使う
  • シンプルな動きに向いている

animation

  • 自動で動かせる
  • 複数段階の動きが作れる
  • 繰り返し動作できる

transitionについては、

「CSS transitionとは？基本と使い方を解説」

で詳しく解説しています。

CSSアニメーションを使う際の注意点

動かしすぎない

過度なアニメーションは、かえって見づらくなる場合があります。

必要な部分だけに使用すると、読みやすさや操作性を損ないにくくなります。

transformやopacityを中心に使う

以下のプロパティは比較的負荷が少なく、滑らかな動作になりやすいです。

  • opacity
  • transform

一方で、

  • width
  • height
  • top
  • left

などを頻繁に変化させると、パフォーマンスに影響することがあります。

まとめ

CSSアニメーションは、要素に動きを加えるための機能です。

基本となるのは、

  • @keyframesで動きを定義する
  • animationプロパティで適用する

という2つです。

さらに、

  • animation-duration
  • animation-delay
  • animation-direction
  • animation-fill-mode
  • animation-timing-function

などを組み合わせることで、さまざまな表現が可能になります。

まずはフェードインやスライドインなどの基本的なアニメーションから試していくと、理解しやすくなります。

関連記事