MENU
  1. ホーム
  2. Cording
  3. 【cording】「@keyframes」「animation」でCSSアニメーションする

【cording】「@keyframes」「animation」でCSSアニメーションする

Cording
【cording】CSSアニメーション

訪問ありがとうございます。

このページでは動きのあるWebサイトを構成する際に使うCSSアニメーションの全体イメージと基本的な使い方を備忘録の意味も兼ねてまとめたページです。

これから「CSSアニメーションを使ってみよう！」と思われた方に参考になればと思います。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

目次

CSSアニメーションとは？

CSSアニメーションとは、CSSを使用して要素のスタイルを時間の経過とともに変化させる技術です。これにより、ウェブページに動きや視覚的な効果を追加することができ、ユーザー体験を向上させることができます。

タイトル

CSSアニメーションの基本

CSSアニメーションは主に二つの要素で構成されています。

  • @keyframesルール
  • animationプロパティ

冒頭のアニメーションを例に流れを説明していきます。

下のHTMLコードに装飾します。

<div class="ex-text">
  <p>タイトル</p>
</div>
STEP
@keyframesルール

アニメーションの各フレームを定義します。

@keyframes ex-text-animation{
  front { /* 0%という表現も可 */
    font-size:10px; /* 開始スタイル */
  }

  to { /* 100%という表現も可 */
    font-size: 50px; /* 終了スタイル */
  }
}

「ex-text-animation」というアニメーション名でテキストのサイズが１０pxから５０pxに変化すると定義します。

STEP
animationプロパティ

animationプロパティを使用してstep１で定義したアニメーションを要素に適用します。

animationの値は左から、“「ex-text-animation」というアニメーション名の定義を３秒間で無制限に繰り返す”という指示です。

.ex-text {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  animation:ex-text-animation 3s infinite forwards; /* アニメーション名、持続時間、繰り返し回数 最後の状態 */
}

これで冒頭のタイトルが大きくなっていくアニメーションが表現できます。

いろいろなアニメーション

ここからはいろいろなアニメーションとそのコードをまとめておきます。

フェードイン・フェードアウト

タイトル

  .ex-fade {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}

.ex-fade p{
  font-size: 50px;
  font-weight: bold;
  animation:fade-in-out 3s infinite; /* アニメーション名、持続時間、繰り返し回数 */
}

@keyframes fade-in-out{
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

スライドイン

タイトル

  .ex-fade {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}

.ex-fade p{
  font-size: 50px;
  font-weight: bold;
  animation:fade-in-out 3s infinite; /* アニメーション名、持続時間、繰り返し回数 */
}

@keyframes slide-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

バウンス

タイトル

.ex-bounce {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}

.ex-bounce p{
  font-size: 50px;
  font-weight: bold;
  animation: bounce 1s ease-out infinite; /* アニメーション名、持続時間、だんだん遅く、繰り返し回数 */
}

@keyframes bounce {
    0% {
        transform: translateY(-50px);
    }
    20%,60%,100% {
        transform: translateY(0px);
    }
    40%{
        transform: translateY(-30px);
    }
    80%{
        transform: translateY(-15px);
    }
}

回転

タイトル

.ex-rotate {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}

.ex-rotate p{
  font-size: 50px;
  font-weight: bold;
  animation: rotate 2s linear infinite; /* アニメーション名、持続時間、等速、繰り返し回数 */
}

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

拡大・縮小

タイトル

.ex-scale {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: blue;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
}

.ex-scale p{
  font-size: 50px;
  font-weight: bold;
  animation: scale 2s infinite; /* アニメーション名、持続時間、等速、繰り返し回数 */
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

色の変化

タイトル

<style>
.ex-colorChange {
  margin: 0;
  width: 100%;
  height: 400px;
  display: flex;
  color: #fff;
  font-size: 10px;
  align-items: center;
  justify-content: center;
  animation: colorChange 2s infinite; /* アニメーション名、持続時間、繰り返し回数 */
}

.ex-colorChange p{
  font-size: 50px;
  font-weight: bold;
}

@keyframes colorChange {
    0% {
        background-color: blue;
    }
    33% {
        background-color: yellow;
    }
    66% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

@keyframesの基本的な構文とanimationプロパティの説明

@keyframes animation-name {
  from {
    /* 初期スタイル */
  }
  to {
    /* 最終スタイル */
  }
}

または、複数の中間ステップを指定することもできます。

@keyframes animation-name {
  0% {
    /* 初期スタイル */
  }
  50% {
    /* 中間スタイル */
  }
  100% {
    /* 最終スタイル */
  }
}

プロパティの説明

animationプロパティ

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
1.animation-name

使用するアニメーションの名前を指定します。これは、@keyframesで定義したアニメーション名と一致させる必要があります。

2.animation-duration

アニメーションの持続時間を指定します。単位は秒（s）またはミリ秒（ms）で指定します。

例: 2s（2秒）

3.animation-timing-function

アニメーションの速度の変化を指定します。以下のような値が使用できます。

linear: 一定の速度でアニメーションが進行します。

ease: 最初は遅く、途中で速く、最後は遅くなります（デフォルト）。

ease-in: 最初は遅く、最後は速くなります。

ease-out: 最初は速く、最後は遅くなります。

ease-in-out: 最初と最後が遅く、中間が速くなります。

4.animation-delay

アニメーションの開始までの遅延時間を指定します。単位は秒（s）またはミリ秒（ms）です。

例: 1s（1秒遅延）

5.animation-iteration-count

アニメーションの繰り返し回数を指定します。整数値またはinfinite（無限）を指定できます。

例: 3（3回繰り返す）

6.animation-direction

アニメーションの進行方向を指定します。以下のような値が使用できます。

normal: 通常の順序でアニメーションが進行します（デフォルト）。

reverse: 逆の順序でアニメーションが進行します。

alternate: 奇数回目は通常の順序、偶数回目は逆の順序で進行します。

alternate-reverse: 奇数回目は逆の順序、偶数回目は通常の順序で進行します。

7.animation-fill-mode

アニメーションが終了した後のスタイルを指定します。以下のような値が使用できます。

none: アニメーションが終了した後、スタイルは元に戻ります（デフォルト）。

forwards: アニメーションの最終状態を保持します。

backwards: アニメーションの初期状態を保持します。

both: 初期状態と最終状態の両方を保持します。

8.animation-play-state

アニメーションの再生状態を指定します。以下の値が使用できます。

running: アニメーションが再生中です（デフォルト）。

paused: アニメーションが一時停止しています。

まとめ

CSSアニメーションは、簡単にサイトに動きを付けられるので重宝すると思います。

「@keyframes」「animation」をこれから使う方や久しぶりに使う際の確認にも使っていただけたらと思います。

@keyframesの構成次第で表現は無限なので私自身学びながら楽しみながら使っていきます。

最後までご覧いただきありがとうございました。

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

あわせて読みたい
【おすすめ】WPテーマ「SWELL」一言でいえば“なにかと使いやすい” 閲覧ありがとうございます。 ページテーマ WordPressテーマ「SWELL」を使ってみた私のおすすめポイントをお伝えします 有料テーマと無料テーマの違いってそんなにある？…

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

あわせて読みたい
【おすすめ】WPテーマ「SWELL」一言でいえば“なにかと使いやすい” 閲覧ありがとうございます。 ページテーマ Wordpressテーマ「SWELL」を使ってみた私のおすすめポイントをお伝えします 有料テーマと無料テーマの違いってそんなにある？...
Cording
よかったらシェアお願いします！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

k-sukeのアバター k-suke

事業で使うサイトを企業に依頼し作成したものの、全く機能せず自分で作り直したのがきっかけでウェブの世界に興味を持ち今も吸収中。
Wordpress、コーディング、マーケティングなどウェブlogにアウトプットしています。誰かの問題解決のヒントになれば最高に嬉しいです。

関連記事

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

目次