【CSS】animationと@keyframesの使い方｜transitionを自動開始や無限ループさせる方法

CSSでアニメーションを設定する簡単なものに開始から終了までの変化方法を指定するtransitionプロパティがあります。

ですが、transitionプロパティをホバー（:hover）やチェック済み（:cheked）などの疑似クラスに対して使用するとホバーした時やチェックした時など、ユーザーが何かアクションをしたときのみしか動き（アニメーション）が発生しません。

時には、自動で動き出して、それを無限ループさせるといった処理を実装したいこともあります。

そんな時は、transitionプロパティとanimationプロパティと@keyframesを合わせることで自動開始や無限ループを実装することができます。

ここではその方法を実例を踏まえて解説しています。

どんなことができるか？

まず最初にサンプルをご紹介します。

ホバーとtransition

animatioinプロパティなしで、ユーザーがカーソルを合わせホバー状態になったときのみ発動するアニメーションは以下のようになります。

See the Pen ホバーとトランジション by pro gurashi (@pro-gurashi) on CodePen.

animationで自動開始＆無限ループ

上記の変化をanimationプロパティを使うと自動開始して無限ループさせることができます。（変化時間を3s、開始時点の色にオレンジとグレーの変更を加えています）

See the Pen Untitled by pro gurashi (@pro-gurashi) on CodePen.

animationと@keyframeの使い方

animationプロパティはCSSでアニメーションを設定することができる優れもので、@keyframeと合わせて使います。

以下でanimationと@keyframeのそれぞれの基本構文や使い方を解説します。また、trasitionで記述していた内容をanimationに置き換える方法もご紹介します。

animationプロパティ

指定できる値（プロパティ）の一覧

animationプロパティはCSSでアニメーションを指定するときに使うプロパティです。marginやpadding, backgroundなどのプロパティと同様に、複数のプロパティをまとめて設定しています。

1つのプロパティでより細かい複数のプロパティをまとめて設定できるプロパティのことを「ショートハンドプロパティ」と呼びます。（ショートハンド（shorthand）は縮めたという意味です）

具体的には、animationプロパティの中には以下の8個のプロパティが含まれています。

１番のポイントとして、animationプロパティに好きな名前（animation-name）をつけるということです。

ここで設定した名前に対して@keyframesで動きをつけます。

また、これらのプロパティはanimationプロパティの値として記述することもできますが、省略したり、別々に記述することもできます。

animationの中でたくさんのプロパティを指定

それぞれの値を全て指定した場合の例は以下のようになります。

animation: 3s ease-in 1s 2 reverse both paused slidein;

それぞれ、duration, easing-function, delay, iteration-count, direction, fill-mode, play-state, nameの値になります。

部分的に指定する

animationで全ての値を記述する必要はありません。以下のように不要なプロパティは省略して記述することができます。

/* name | duration | easing-function | delay */
animation: slidein 3s linear 1s;

/* name | duration */
animation: slidein 3s;

記述しない値にはデフォルト値が適用されます（上記表参照）。

プロパティ省略時の追加指定

animationプロパティの値の中で全てのプロパティを記述する必要はありません。また、ここで記述しなかったものを後から追加したい場合、animationの中に記述せずに、別のセレクタに記述することができます。

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

      .c-btn {
        background: blue;
        color: #fff;
        display: block;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        animation: anime-sample 3s infinite;
      }

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

animationのところは名前「anime-sample」、持続時間「3秒」、無限繰返し「infinate」の３つが指定してあります。

animation: anime-sample 3s infinite;

これに加えて、animation-timing-functionプロパティは外に切り出して記述しています。

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

こうすることで、animation対象の全ての要素にeaseを指定するのではなく、特定の要素にのみeaseを指定することができます。

@keyframes

@keyframesは、animationプロパティで設定した内容を①どのタイミングで②どのCSSプロパティに適用させるかを指定するものです。

記述場所はプロパティとして記述するのではなく、セレクタの部分に記述します。（CSSのメディアクエリ（@media screen and (max-width 767px)）と似た使い方になります）

なお、keyframe（キーフレーム）とは開始点と終了点の中である地点を指定して、指定した場所での対象物の状態を指示するものです。CSSだけでなく動画編集などでも使用します。

@keyframesの基本的な書き方

通常の使い方は以下のようになります。

@keyframes アニメーション名 {
  0% { プロパティ名: 値; }
  100% { プロパティ名: 値; }
}

アニメーション名にはanimation-nameプロパティで指定した値が入ります。

アニメーション開始前を0%、アニメーション完了後を100%として、それぞれの状態におけるCSSを記述します。

実例１

例えば、以下のようなCSSの場合、animation-nameが「smooth-fadein-out」というアニメーションの開始時点の状態は非表示（不透明度0）、アニメーションが完了したときは表示（不透明度１）となります。

@keyframes smooth-fadein-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

実例２

例えば、以下のようなCSSの場合、animation-nameが「expand-animation」というアニメーションの開始時点の状態は長さ50px、アニメーションが完了したときは長さ（100%）となります。

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

途中経過を指定する

@keyframesでは開始点（0%）と終了点（100%）の状態だけでなく、中間点でのCSSの状態も指定することができます。

中間点は何個でも追加することができ%で指定します。

@keyframes アニメーション名 {
  0% { プロパティ名: 値; }
  x% { プロパティ名: 値; }
  y% { プロパティ名: 値; }
　.
  .
  .
  100% { プロパティ名: 値; }
}

例えば、20%と50%の時点の状態を追加したい場合は以下のように記述します。

@keyframes アニメーション名 {
  0% { プロパティ名: 値; }
  20% { プロパティ名: 値; }
  50% { プロパティ名: 値; }
  100% { プロパティ名: 値; }
}

transitionをanimationに書き換える

transitionとanimationはとても似ているため、transitionをanimationに書き換えることができます。

置き換え前（transition）

例えば以下のように、ホバー時に持続時間「transition-duration: 1.5s;」で直線的「transition-timing-function: linear;」に変化するコードがあるとします。

  <section>    
    <style>
      .c-btn {
        background: blue;
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        transition-duration: 3s;
     }
      
     .c-btn:hover{
        background: red;
        max-width:  100%;
      }

      
      .ease-in-out{
        animation-timing-function: ease-in-out;
      }
      
      section{
        height: 100px;
      }
    </style>

    
    <div class="c-btn ease-in-out">ease-in-out</div>
    
    
  </section>

実際の動きは以下のようになります。

上記のコードを置き換えると以下のようになります。

  <section>
    <style>
      .c-btn {
        /* background: blue; */
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        /* transition-duration: 3s; */
        animation: anime-sample 3s forwards;
      }
      
       @keyframes anime-sample{
        0%{
          background: blue;
          max-width: 100px;
        } 
        100%{
          background: red;
          max-width:100%;
        }
      }
      
     .c-btn:hover{
        background: red;
        max-width:  100%;
      }

      
      .ease-in-out{
        /* transition-timing-function: ease-in-out; */
        animation-timing-function: ease-in-out;
      }
      
      section{
        height: 100px;
      }
    </style>

    
    <div class="c-btn ease-in-out">ease-in-out</div>
    
    
  </section>

ホバーしなくても勝手に動くのがポイントです。

animation: anime-sample 1.5s forwards;を設定したことで、transition-duratinoは不要になります。

なお、forwardsはanimation-fill-modeプロパティの値で、アニメーション終了時点でどういう状態にするかを指定します。「forwards」にすると終了点の状態を維持します。（※この記述がないとアニメーション終了後に非表示になります）

また、animationプロパティを設定したので、このアニメーションに対して@keyframeを設定する必要があります。

       @keyframes anime-sample{
        0%{
          background: blue;
          max-width: 100px;
        } 
        100%{
          background: red;
          max-width:100%;
        }
      }

@keyframeの中で変化させるCSSプロパティの開始と終了時点の状態を記述します。

このため、もともとは要素に対して指定していたbackgroundとmax-widthの記述は不要となります。（下記でコメントアウトしている箇所です）

      .c-btn {
        /* background: blue; */
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        /* transition-duration: 3s; */
        animation: anime-sample 3s;
      }

また、animationプロパティにした場合「transition-timing-function」は機能しなくなります。代わりに「animation-timing-function」を指定します。

      .ease-in-out{
        /* transition-timing-function: ease-in-out; */
        animation-timing-function: ease-in-out;
      }

以上でtranstionからanimationへの書き換えは完了です。

お疲れ様でした^^

ご参考

transition関連のプロパティの使い方は下記をご参考ください。