HTML&CSS

【超初心者向け】アニメーション作成講座【その１】

cssアニメーション講座
ニャンコ
ニャンコ

コーディングは結構できるようになってきたけど、サイトに動きがなくて寂しいよ。

今はcssだけでも、アニメショーンは作成できるよ。
まずは、cssアニメーションをマスターしよう。

ワンコ
ワンコ

ｃｓｓアニメーションについて

cssアニメーションは、animationプロパティと@keyframesの二つからなります。
どちらか一方だけではアニメーションは作成できないので必ずセットで指定しましょう。

animation

アニメーションの設定を行なうプロパティです。
アニメーションの実行回数や何秒でアニメーションを実行するかなどを指定します。

@keyframes

アニメーションがどのように動くかを指定します。

@keyframes

キーフレームはアニメーションの動きを設定します。
基本は0% ～ 100% までの間で、どのように遷移するかの変化を指定します。
以下のように指定します。 「@keyframes」の後はアニメーション名です。
好きな名前を指定しましょう。

/* anime1 はアニメーション名 */
@keyframes anime1 {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
}

0％～100% まで伸縮するような遷移にしました。

先ほどは、0%と100%の二つだけでしたが、合間合間に30%など好きな時点で変化を指定することができます。

/* anime1 はアニメーション名 */
@keyframes anime02 {
    0% {
      background-color: red;
    }
    30% {
      background-color: blue;
    }
    60% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
}

「@keyframes」に関しては以上になります。
動きの遷移だけを指定するので分かりやすいですね。

animationプロパティの構成要素

animationプロパティを構成する要素を紹介します。
全て指定する必要はなく、必要なプロパティを組み合わせてアニメーションを指定します。

animation-name（アニメーションの名前）

animation-name:slide;

要素に適用するアニメーションの名前を指定します。
後ほど解説する@keyframesで作成したアニメーションの名前を指定します。

animation-delay（アニメーション開始までの遅延時間）

animation-delay: 1s; /* sは秒数 */

アニメーションが開始されるまでの時間を指定します。
余談ですが、「delay」は日本語に訳すと「遅れ」という意味になります。

１秒～３秒まで開始時間を遅らせた見本です。
アニメーション開始時間をそれぞれずらすことで、順番に実行するアニメーションを作成することも可能です。

1s
2s
3s

animation-duration（アニメーションの時間）

animation-delay: 1s; /* sは秒数 */

アニメーション１回の時間を指定します。
「duration」は日本語に訳すと「間隔」という意味になります。

３秒を指定すれば、３秒かけてアニメーションが行われます。
時間が長いほどゆっくりと時間をかけて、アニメーションが行われるのが分かると思います。

1s
2s
3s

animation-timing-function（アニメーションの緩急）

animation-timing-function: ease;

アニメーションがどのように変化するか、緩急を指定します。
アニメーションの進行具合は異なりますが、「animation-duration」で指定した時間内に終了します。

ボタンを押すとアニメーションが始まるので、進行具合を比較してみましょう。

アニメーション開始

ease：
開始と終了が緩やか
ease-in：
開始が緩やか
ease-out：
開始がはやく、終了が緩やか
ease-in-out：
easeよりも開始と終了が緩やか
linear：
一定の速度
steps：
指定したコマ数変化する

animation-fill-mode（アニメーション実行前後のスタイル）

animation-fill-mode: forwards;

アニメーションの実行前後のスタイルをどうするかを設定します。

アニメーション開始

リセット

none：
再生前：元のスタイル
再生後：元のスタイル
forwards：
再生前：元のスタイル
再生後：アニメーション最後のスタイル
backwards：
再生前：アニメーション最初のスタイル
再生後：元のスタイル
both：
再生前：アニメーション最初のスタイル
再生後：アニメーション最後のスタイル

animation-iteration-count:infinite（アニメーションの実行回数）

animation-iteration-count:infinite;

アニメーションの実行回数を指定します。
回数を数値で指定するか、「infinite」を指定すると無限に再生されます。

リセット

アニメーション開始

リセット

1回
2回
3回
無限

animation-direction:normal（アニメーションの再生方向）

animation-direction:normal;

アニメーションのサイクルごとの再生方向を指定します。

normal：初期値
普通方向
reverse：
逆方向
alternate：
アニメーション回数が奇数回の時は普通方向、偶数回の時は逆方向
alternate-reverse：
アニメーション回数が奇数回の時は逆方向、偶数回の時は普通方向

アニメーションプロパティの一括指定

上記のプロパティは、一括で指定することもできます。
プロパティの数が多いため、一括で指定した方がすっきりとした見た目になります。

    .anime {
      animation-name: anime01;
      animation-fill-mode: forwards;
      animation-duration:3s;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function:ease;
      animation-delay: 1s;
      animation-direction:normal;

      /* 一括指定 */
      animation: anime01 forwards 3s infinite ease 1s normal;
    }

また、指定するプロパティは最低限下記の３つのプロパティを指定して、後は必要に応じて追加しましょう。

.anime {
  /* アニメーションの名前 */
  animation-name: anime1;

  /* アニメーションの回数 */
  animation-iteration-count: infinite;

  /* アニメーションの秒数 */
  animation-duration: 2s;
}

アニメーションサンプル

ふわふわ動く

縦に動くアニメーションと横に動くアニメーション二つを組み合わせて、ふわふわ動くアニメーションです。
画像などに使用するとよさげですね。

<div class="move">
  <img  class="move2" style="width: 200px;" src="https://web-create-kokusyo.com/wp-content/uploads/2023/03/23363200-300x300.png" alt="">
</div>
/* animationプロパティの設定 */
.move {
  animation: 2s ease-in-out infinite alternate move
}
.move2 {
  animation: 2s linear infinite alternate move2;
}

/* @keyframesの設定 */
@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes move2 {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
  }
}

文字のスライドイン

文字がスライドして現れる動きです。
タイトルなどに良さそうです。

タイトルがスライドして現れる

<p class="slide">タイトルがスライドして現れる</p>
/* animationプロパティの設定 */
.slide {
  color: #fff;
  width: 300px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  animation-name: slide;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: left center;
  z-index: -1;
  transform: scaleX(0);
}

/* @keyframesの設定 */
@keyframes slide {
  0% {
    transform: scaleX(0);
  }

  50% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(1);
  }
}

他にも様々な動きができますが、自分の想像通りの動きを作成するのは結構難しいものです。
そんな時は、ネットで検索するとコピペOK！のようなアニメーション一覧のようなものがあるのでそういったものを利用するのも手だと思います。

次回

今回はcssアニメーションの解説でした。
ただ、今回だけでは最初から無限に動く動きしか作成できません。
スクロールに合わせてアニメーションを実行したり、クリックでアニメーションを実行するなどの処理も覚えると幅が広がります。

ということで次回は、CSSアニメーションの実行タイミングやアニメーションの発火について解説致します。

-HTML&CSS
-,