アニメーションのあるサイトはおしゃれな印象を与えることができます。CSSでアニメーションをつけるプロパティはtransitionが代表的ですが、transitionでは簡単なアニメーションしか実装できません。

そこでCSSアニメーションを使用すれば高度なアニメーションが実装できます。CSSアニメーションとはanimationプロパティと@keyframeの記述を組み合わせた実装方法です。CSSアニメーションはプロパティが多く使いこなすのは困難ですが、マスターすればWeb制作スキルが格段に上がります。

この記事ではCSSアニメーションの使い方を解説します。現場で使えるサンプルも表示しているので参考にしてください。

目次

CSSアニメーションの構成

CSSアニメーションではanimationプロパティと@keyframesを組み合わせることで高度なアニメーションを実装できます。

animationプロパティではアニメーションの秒数や回数を指定し、@keyframesではアニメーションがどのように変化するかを指定します。

CSSアニメーションの基本形

まずはサンプルで基本形を確認しましょう。

animation@keyframesを使用するCSSアニメーションの基本形は以下です。

htmlのコード

<div class="animation">アニメーションサンプル</div>

cssのコード

.animation{
  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count:infinite;
  background: #ffbb1e;
  height: 60px;
  text-align: center;
}

@keyframes animation{
  0%{
    width: 50%;
  }
  
  100%{
    width: 100%;
  }
}

出力結果

@keyframesの指定方法

@keyframesの中にはアニメーションがどのように変化するかを記述します。

指定方法は以下の2つです。

  • 0%~100%で指定する
  • to~fromで指定する

0%~100%で指定する

@keyframesは0%~100%の数値を指定できます。

記述例は以下のようになります。

cssのコード

@keyframes animation{
  0%{
    /*アニメーションを開始するときのCSSを記述*/
  }

  50%{
    /*アニメーションの中間のCSSを記述*/
  }

  100%{
    /*アニメーションを終了するときのCSSを記述*/
  }
}

from~toで指定する

0~100%はfrom~toと指定しても同じ動きになります。

記述例は以下のようになります。

cssのコード

@keyframes animation{
  from{
    /*アニメーションを開始するときのCSSを記述*/
  }

  to{
    /*アニメーションを終了するときのCSSを記述*/
  }
}

animationの指定方法

animation-nameはアニメーションに名前をつけるプロパティです。半角英数字で任意の名前を指定します。

CSSアニメーションで実装するときは「このアニメーションはこの名前」という定義が必要です。この定義名に対して@keyframesでアニメーションの変化を指定します。

記述例は以下のようになります。

cssのコード

.class{
  animation-name: animation;/*"animation"という名前のアニメーションを定義する*/
}

ここで定義した名前を@keyframesに記述することで、初めてCSSアニメーションが機能します。

cssのコード

@keyframes animation/*ここに定義名を記述する*/{
  0%{
    /*アニメーションを開始するときのCSSを記述*/
  }
  100%{
    /*アニメーションを終了するときのCSSを記述*/
  }
}

animation-duration

animation-durationはアニメーションの秒数を指定するプロパティです。初期値は0s、指定できる単位はs(秒)かms(ミリ秒)です。

記述例は以下のようになります。

cssのコード

animation-duration: 1s;/*1秒かけてアニメーションさせる*/

htmlのコード

<div class="animation">1秒かけてアニメーション</div>

cssのコード

.animation{
  animation-name: animation;
  animation-duration: 1s;/*1秒かけてアニメーション*/
  background: #ffbb1e;
  height: 60px;
}

@keyframes animation{
  /*1秒かけてwidth: 50%;→width: 100%;になる動きを記述*/
  0%{
    width: 50%;
  }
  100%{
    width: 100%;
  }
}

出力結果

animation-delay

animation-delayはアニメーションの開始を遅らせるプロパティです。初期値は0s、指定できる単位はs(秒)かms(ミリ秒)です。

記述例は以下のようになります。

cssのコード

animation-delay: 1s;/*アニメーションの開始を1秒遅らせる*/

htmlのコード

<div class="animation">1秒後にアニメーション開始</div>

cssのコード

.animation{
  animation-name: animation;
  animation-delay: 1s;/*1秒後にアニメーション開始*/
  animation-duration: 1s;
  background: #ffbb1e;
  height: 60px;
}

@keyframes animation{
  0%{
    width: 50%;
  }
  100%{
    width: 100%;
  }
}

出力結果

animation-timing-function

animation-timing-functionはアニメーションの進行度合いを設定するプロパティです。

初期値はease、指定できる値は次の7つです。

指定できる値値の意味
ease(初期値)開始時と終了時の動きをなめらかにする
ease-in開始時だけなめらかにする
ease-out終了時だけなめらかにする
ease-in-outeaseよりもゆっくり変化させる
linear一定の速度で変化させる
stepsコマ送りのように変化させる
cubic-bezier変化の度合いをX軸・Y軸で変化させる

記述例は以下のようになります。

cssのコード

animation-timing-function: ease;/*アニメーションの進行度合いを設定する*/

htmlのコード

<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>
<div class="box linear">linear</div>
<div class="box cubic-beizer">cubic-beizer</div>

cssのコード

/*全体的なスタイル*/
.box{
  animation-name: animation;
  animation-duration:3s;
  text-align: center;
  width: 30%;
  height: 30px;
  margin-bottom: 20px;
  background: #ffbb1e;
}

/*進行度の指定*/
.ease{
  animation-timing-function:ease;/* 開始時と終了時の動きをなめらかにする*/
  }
  
  .ease-in{
  animation-timing-function:ease-in;/*開始時だけなめらかにする*/
  }
  
  .ease-out{
  animation-timing-function:ease-out;
  }/*終了時だけなめらかにする*/
  
  .ease-in-out{
  animation-timing-function:ease-in-out;
  }/*easeよりもゆっくり変化させる*/
  
  .linear{
  animation-timing-function:linear;
  }/* 一定の速度で変化させる*/
  
  .steps{
  animation-timing-function:steps(4, end);
  }/* コマ送りのように変化させる*/
  
  .cubic-bezier{
  animation-timing-function:cubic-bezier(0.25,0.1,0.25,0.1);
  }/*変化の度合いをX軸・Y軸で変化させる*/

  @keyframes animation{
    0%{
      width: 30%;
    }
    100%{
      width: 100%;
    }
  }

出力結果

animation-fill-mode

animation-fill-modeはアニメーション終了時の状態を指定するプロパティです。

初期値はnone、指定できる値は次の4つです。

指定できる値値の意味
none(初期値)指定なし
forwards終了時の状態を維持する
backwards開始時の状態に戻る
both開始時に”forwards”、終了時に”backwards”を適用する

記述例は以下のようになります。

cssのコード

animation-fill-mode: forwards;/*アニメーション終了時の状態*/

htmlのコード

<div class="box none">指定なし</div>
<div class="box forwards">そのまま</div>
<div class="box backwards">もとに戻る</div>
<div class="box both">開始時にforwards、<br>終了時にbackwards</div>

cssのコード

.box{
  animation-name: animation;
  animation-duration:3s;
  text-align: center;
  width: 30%;
  height: 60px;
  margin-bottom: 20px;
  background: #ffbb1e;
}

.none{
  animation-fill-mode:none;/*指定なし*/
}

.forwards{
  animation-fill-mode:forwards;/*終了時の状態を維持する*/
}

.backwards{
  animation-fill-mode:backwards;/*開始時の状態に戻る*/
}

.both{
  animation-fill-mode:both;/*開始時に"forwards"、終了時に"backwards"を適用する*/
}

@keyframes animation{
  0%{
    width: 30%;
  }
  100%{
    width: 100%;
  }
}

出力結果

animation-iteration-count

animation-iteration-countはアニメーションがループする回数を指定するプロパティです。

数値を指定するとその数だけアニメーションがループします。infiniteを指定すると無限にループさせることができます。初期値は1です。

記述例は以下のようになります。

cssのコード

animation-iteration-count: infinite;

htmlのコード

<div class="animation count-3">3回アニメーション</div>
<div class="animation count-infinite">無限ループアニメーション</div>

cssのコード

.animation{
  animation-name: animation;
  animation-duration: 3s;
  background: #ffbb1e;
  margin-bottom: 20px;
  height: 60px;
}

.count-3{
  animation-iteration-count:3;/*3回ループ*/
}

.count-infinite{
  animation-iteration-count:infinite;/*無限ループ*/
}

@keyframes animation{
  /*1秒かけてwidth: 0;→width: 100%;になる動きを記述*/
  0%{
    width: 50%;
  }
  100%{
    width: 100%;
  }
}

出力結果

animation-direction

animation-directionはアニメーションの向きを指定するプロパティです。初期値はnormal、指定できる値は以下の4つです。

指定できる値値の意味
normal(初期値)通常通りの動き
reverse逆方向の動き
alternate奇数回で通常、偶数回で逆の動き
alternate-reverse奇数回で逆、偶数回で通常の動き

記述例は以下のようになります。

cssのコード

animation-direction: normal;

htmlのコード

<div class="box normal">通常</div>
<div class="box reverse">逆方向</div>
<div class="box alternate">偶数回で逆方法</div>
<div class="box alternate-reverse">奇数回で逆方向</div>

cssのコード

.box{
  text-align: center;
  height: 30px;
  margin-bottom: 20px;
  animation-name: animation;
  animation-duration:5s;
  animation-iteration-count: infinite;
}

.normal{
  animation-direction: normal;/**/
}
.reverse{
  animation-direction: reverse;
}
.alternate{
  animation-direction: alternate;
}
.alternate-reverse{
  animation-direction: alternate-reverse;
}

  @keyframes animation{
    0%{
      width: 50%;
      background: #ffbb1e;
    }
    100%{
      width: 100%;
      background: #ffbb1e;
    }
  }

出力結果

animationでまとめて指定する

animationプロパティはまとめて指定することもできます。このような指定の仕方をショートハンドといいます。

animationプロパティをショートハンドで指定する場合の記述例は以下のようになります。

cssのコード

animation: animation forwards 3s infinite ease 5s alternate;
animation: 名前 終了時の状態 アニメーションの秒数 ループの回数 進行度 開始までの秒数 アニメーションの向き;

指定の順番は特にありませんが、durationdelayについては先に記述した数値がdurationとなるので注意しましょう。

CSSアニメーションの現場で使えるサンプル

テキストが動くアニメーション

テキストのアニメーションをつける実装はファーストビューなどで使うことが多いです。フェードインやスライドインなど様々な演出があります。

htmlのコード

<div class="animation fadein">テキストがフェードイン</div>
<div class="aniamtion slidein">テキストがスライドイン</div>
<div class="animation bounce">テキストが跳ねる</div>

cssのコード

.aniamtion{
  margin-bottom: 20px;
}

/*fadeinの記述*/
.fadein{
  animation: fadein 3s infinite;/*fadeinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes fadein{
  /*fadeinの変化を記述*/
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

/*slideinの記述*/
.slidein{
  animation: slidein 3s infinite;/*slideinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes slidein{
  /*slideinの変化を記述*/
  0%{
    transform: translateX(-100px);
  }

  100%{
    transform: translateY(0);
  }
}

/*テキストが跳ねるアニメーションの記述*/
.bounce {
  animation: bounce 0.5s infinite;/*slideinが3秒かけてアニメーション、無限ループ*/
  font-size: 30px;
}

@keyframes bounce {
  /*テキストが跳ねる変化を記述*/
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

出力結果

ローディングアニメーション

JavaScriptやCSSアニメーションを多く使っているサイトは読み込みが遅くなる場合があります。サイトの読み込みが遅い場合はユーザーにストレスを感じさせないようにローディング画面を実装します。このような場面でもCSSアニメーションを使用します。

htmlのコード

<div class="loader"></div>

cssのコード

.loader{
  /*円のデザイン*/
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: solid 6px;
  /*色の指定*/
  border-color: #ffbb1e #faebe4 #faebe4;
  /*アニメーションの指定*/
  animation: spin 1s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);/*回転する*/
  }
}

出力結果

雪や紙吹雪のアニメーション

CSSアニメーションを使用して雪や紙吹雪の演出も可能です。このような演出があるとサイトにリッチな印象を加えられます。

雪のアニメーション

htmlのコード

<div class="snow">#9679</div>

cssのコード

body{
  background: #000;
}

.snow {
  color: snow;/*雪の色*/
  font-size: 8px;/*雪の大きさ*/
  position: fixed;
  /*雪の位置を指定-ランダムな数値を入れて雪をあちこちに降らせる*/
  text-shadow:3vw -100px 1px, 10vw -200px 3px, 15vw -700px 4px, 20vw -500px 7px, 25vw -500px 2px, 30vw -300px 1px,    36vw -400px 2px,  40vw -150px 6px, 47vw -840px 2px, 50vw -300px 5px,60vw -200px 3px, 68vw -100px 5px,    70vw -250px 1px, 80vw -620px 9px, 90vw -800px 4px;
  /*アニメーションの指定*/
  animation: snow 5s linear infinite;
}

@keyframes snow {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

出力結果

紙吹雪のアニメーション

htmlのコード

<div class="confetti">
 <span></span><span></span><span></span>  <span></span><span></span><span></span>  <span></span><span></span><span></span>  <span></span><span></span>
</div>
<p>紙吹雪のアニメーション</p>

cssのコード

/*紙吹雪のスタイル*/
.confetti {
  position: absolute;
  width: 100%;
  height: 100%;
}

.confetti span {
  position: absolute;
  top: -100%;/*アニメーション以外の紙吹雪を非表示*/
  left: 0;
}

/*アニメーションの記述*/
.confetti span:nth-child(2n + 1) {
  animation: confetti1 5s 0s linear infinite;
}

.confetti span:nth-child(2n + 2) {
  animation: confetti2 5s 0s linear infinite;
}

/*紙吹雪を回転させる記述*/
@keyframes confetti1 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(20px) rotateX(180deg) rotateY(360deg);
}
}

@keyframes confetti2 {
  0% {
    top: -10%;
    transform: translateX(0) rotateX(0) rotateY(0);
  }

  100% {
    top: 100%;
    transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
  }
}

/*紙吹雪の配置*/
.confetti span:nth-child(1) {
  left: 0%;
}

.confetti span:nth-child(2) {
  left: 10%;
}

.confetti span:nth-child(3) {
  left: 20%;
}

.confetti span:nth-child(4) {
  left: 30%;
}

.confetti span:nth-child(5) {
  left: 40%;
}

.confetti span:nth-child(6) {
  left: 50%;
}

.confetti span:nth-child(7) {
  left: 60%;
}

.confetti span:nth-child(8) {
  left: 70%;
}

.confetti span:nth-child(9) {
  left: 80%;
}

.confetti span:nth-child(10) {
  left: 90%;
}

.confetti span:nth-child(11) {
  left: 100%;
}

/*紙吹雪の大きさ*/
.confetti span:nth-child(3n + 1) {
  width: 3vw;
  height: 3vw;
}

.confetti span:nth-child(3n + 2) {
  width: 2vw;
  height: 2vw;
}

.confetti span:nth-child(3n + 3) {
  width: 1.5vw;
  height: 1.5w;
}

/*紙吹雪の色*/
.confetti span:nth-child(2n + 1) {
  background: red;
}

.confetti span:nth-child(2n + 2) {
  background: orange;
}

.confetti span:nth-child(2n + 3) {
  background: purple;
}

.confetti span:nth-child(2n + 4) {
  background: pink;
}

.confetti span:nth-child(2n + 5) {
  background: blue;
}

.confetti span:nth-child(2n + 6) {
  background: green;
}

.confetti span:nth-child(2n + 7) {
  background: yellow;
}

/*アニメーションの秒数*/
.confetti span:nth-child(2n + 1) {
  animation-duration: 5s;
}

.confetti span:nth-child(2n + 2) {
  animation-duration: 6s;
}

.confetti span:nth-child(2n + 3) {
  animation-duration: 10s;
}

.confetti span:nth-child(2n + 4) {
  animation-duration: 4s;
}

/*紙吹雪が降り始めるまでの時間*/
.confetti span:nth-child(2n + 1) {
  animation-delay: 0s;
}

.confetti span:nth-child(2n + 2) {
  animation-delay: 4s;
}

.confetti span:nth-child(2n + 3) {
  animation-delay: 6s;
}

.confetti span:nth-child(2n + 4) {
  animation-delay: 2s;
}

.confetti span:nth-child(2n + 5) {
  animation-delay: 6s;
}

.confetti span:nth-child(2n + 6) {
  animation-delay: 10s;
}

.confetti span:nth-child(2n + 7) {
  animation-delay: 2s;
}

.confetti span:nth-child(2n + 8) {
  animation-delay: 4s;
}

.confetti span:nth-child(2n + 9) {
  animation-delay: 11s;
}

.confetti span:nth-child(2n + 10) {
  animation-delay: 1s;
}

.confetti span:nth-child(2n + 11) {
  animation-delay: 5s;
}

出力結果

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP