CSSアニメーション③~transformプロパティ編~

テキスト目次 > HTMLとCSSの応用 >　CSSアニメーション③~transformプロパティ編~

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

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

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

目次

CSSアニメーションの構成

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

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

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

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

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

<div class="animation">アニメーションサンプル</div>
HTML
.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%;
  }
}
CSS

出力結果

@keyframesの指定方法

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

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

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

0%~100%で指定する

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

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

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

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

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

from~toで指定する

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

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

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

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

animationの指定方法

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

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

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

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

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

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

animation-duration

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

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

animation-duration: 1s;/*1秒かけてアニメーションさせる*/
CSS
<div class="animation">1秒かけてアニメーション</div>
HTML
.animation{
  animation-name: animation;
  animation-duration: 1s;/*１秒かけてアニメーション*/
  background: #ffbb1e;
  height: 60px;
}

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

出力結果

animation-delay

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

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

animation-delay: 1s;/*アニメーションの開始を1秒遅らせる*/
CSS
<div class="animation">1秒後にアニメーション開始</div>
HTML
.animation{
  animation-name: animation;
  animation-delay: 1s;/*1秒後にアニメーション開始*/
  animation-duration: 1s;
  background: #ffbb1e;
  height: 60px;
}

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

出力結果

animation-timing-function

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

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

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

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

animation-timing-function: ease;/*アニメーションの進行度合いを設定する*/
CSS
<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>
HTML
/*全体的なスタイル*/
.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%;
    }
  }
CSS

出力結果

animation-fill-mode

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

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

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

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

animation-fill-mode: forwards;/*アニメーション終了時の状態*/
CSS
<div class="box none">指定なし</div>
<div class="box forwards">そのまま</div>
<div class="box backwards">もとに戻る</div>
<div class="box both">開始時にforwards、<br>終了時にbackwards</div>
HTML
.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%;
  }
}
CSS

出力結果

animation-iteration-count

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

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

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

animation-iteration-count: infinite;
CSS
<div class="animation count-3">3回アニメーション</div>
<div class="animation count-infinite">無限ループアニメーション</div>
HTML
.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%;
  }
}
CSS

出力結果

animation-direction

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

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

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

animation-direction: normal;
CSS
<div class="box normal">通常</div>
<div class="box reverse">逆方向</div>
<div class="box alternate">偶数回で逆方法</div>
<div class="box alternate-reverse">奇数回で逆方向</div>
HTML
.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;
    }
  }
CSS

出力結果

animationでまとめて指定する

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

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

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

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

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

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

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

<div class="animation fadein">テキストがフェードイン</div>
<div class="aniamtion slidein">テキストがスライドイン</div>
<div class="animation bounce">テキストが跳ねる</div>
HTML
.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);
  }
}
CSS

出力結果

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

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

<div class="loader"></div>
HTML
.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

出力結果

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

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

雪のアニメーション

<div class="snow">#9679</div>
HTML
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%;
  }
}
CSS

出力結果

紙吹雪のアニメーション

<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>
HTML
/*紙吹雪のスタイル*/
.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

出力結果

チェックテスト

チェックテストを確認する

下記コードを参考に、更新から2秒後に5秒間かけて@keyframesに記載されているanimationが動くコードを追記し、discordで共有ください。 アニメーションは無限ループするものとします。 

<div class="animation">アニメーション</div>
<style>
 .animation {
   background: #ffbb1e;
   height: 60px;
   text-align: center;
   width: 10%;
 }


 @keyframes animation {
   0% {
     width: 10%;
   }


   100% {
     width: 80%;
   }
 }
</style>
HTML

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP