CSS/Animation

CSS Animation

CSSアニメーションはCSS3の規格で、スマートフォンを含む多くのブラウザがそれに対応したことで、活用事例が増えています。それなりにコード量は増えますが、JavaScript(jQuery)なしで動きが実現できるのが大きな魅力です。

CSSでアニメーションを実現するには、位置・回転・拡大縮小について「どういう状態であるか」を定義する transform と、時間的に「どのように変化するか」あるいは「どのように動くか」を定義する transition と animation、計３つのプロパティーがあります。以下、順に概説します。

transform

transform は要素の状態（位置・回転、拡大縮小）を定義するプロパティーで、後述する transitionの開始・終了時の状態や、@keyframes の個々のタイミングにおける変形処理を定義します。2Dと3Dがあります。

transition や animation の使用に際して記述するものですが、例えば、アイコンを傾けて表示したい場合などは、これだけの記述でも機能します。

プロパティー

• 移動(translate, translate3d, translateX, translateY, translateZ)
  注意：transformプロパティーで translate（移動） を利用する場合、要素は position: absolute; で初期位置が定義されていることが前提となります。
• 回転(rotate, rotate3d, rotateX, rotateY, rotateZ)
• 拡大縮小(scale, scale3d, scaleX, scaleY, scaleZ)
• スキュー(skew, skewX, skewY)
• マトリクス処理(matrix, matrix3d)
• 透視投影(perspective)
  
  

transformを単なる状態定義に用いた事例

BOXが45度傾いて表示されます。

• HTML

  <div class="box"></div>

• CSS

  .box {
    width: 100px;
    height: 100px;
    background: black;
    transform: rotate(-45deg);
  }

  
  
  
  

transition

transition（状態の変化）は、CSSプロパティが変化する際のアニメーションを定義します。典型的なのは :hover によってCSSプロパティーが変化する場合です。よって一般に、:hover によって変化する対象のセレクタに対して、このプロパティーを適用します。実際に動くのは :hover したときです。

• プロパティー
  • transition-property　アニメーションを適用する対象プロパティ
  • transition-duration　開始から終了までの所要時間
  • transition-delay　アニメーションが開始するまでの遅延時間　
  • transition-timing-function　イージングを指定
  • transition　ショートハンド（上記４つをまとめて指定できます）

• 一般にCSSには、「常態」と :hover をセットで記述します。transition すなわち「どう遷移するか」の情報は、常態側に記述します。
  
  

transitionを用いた事例１｜マウスホバーで変形

マウスホバーで「100x100の黒い正方形が、２秒かけて幅500pxのグレーの長方形に変化する」という事例の要点のみを記述した例です。
　

• HTML

  <div class="box"></div>

• CSS

  .box {
    width: 100px;
    height: 100px;
    background: black;
    transition: all 200ms 0s ease;  
  }
  .box: hover {
    background: gray;
    width: 500px;
  }

transitionを用いた事例２｜マウスホバーで要素にアクション

各要素に個別にクラスを定義しただけのシンプルな事例集です。CSSは必要な部分のみカットして使えます。

• DEMO：https://koichi-inoue.github.io/CSS_Animation01/
• CODE：https://github.com/koichi-inoue/CSS_Animation01

animation

animation は @keyframes とセットで使います。具体的な動きのパターンを @keyframes [ animation-name ]{・・} に定義したうえで、animation プロパティに、使用する animation-name、所要時間、開始までの遅延、イージング、ループ回数などの値を定義します。

@keyframes の書き方

@keyframes [ animation-name ] { /* プロパティー */ }; 

記述例１　単純遷移（白から黒へ）

@keyframes pattern01 {
  0% { color: #FFFFFF; }
  100% { color: #000000; }
}

記述例２　from to の利用

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

記述例２　パーセンテージの列挙

@keyframes pattern03 {
  0%     { transform: rotate(0deg);  }
  30%    { transform: rotate(180deg);  }
  80%    { transform: rotate(-180deg);  }
  100%   { transform: rotate(0deg); }
}

amimationプロパティーの書き方

animation: animation-name animation-duration animation-timing-function
                  animation-delay animation-iteration-count animation-direction
                  animation-fill-mode animation-play-state;

• animation-name　要素に適用するキーフレームアニメーションを指定
• animation-duration　開始から終了までの所要時間
• animation-timing-function　イージングを指定（ ease / linear）
• animation-delay　アニメーションが開始するまでの遅延時間
• animation-iteration-count　アニメーションのループ回数
• animation-direction　アニメーションの再生方向
• animation-fill-mode　キーフレーム指定プロパティの適用法
• animation-play-state　アニメーションの再生と一時停止
• animation　ショートハンド（上記をまとめて指定できます）

記述例：

animation: pattern01  5s ;　

この例は、@keyframesにおいて pattern01 として定義された動きを、5秒で動かすことを意味します。

animationを用いた事例１

Hello World! がじわっと出ます。animation-name を fade にしています。

• DEMO：https://koichi-inoue.github.io/CSS_Animation00/
• CODE：https://github.com/koichi-inoue/CSS_Animation00
  　
• HTML

  <h1>Hello World!</h1>

• CSS

  h1{
    text-align: center;
    animation: fade 5s ease;
  }
  @keyframes fade {
    0% { color: #3399FF; }   /* 背景色と同じ色（背景に埋もれます） */
    100% { color: #FFFFFF; }  /* 白 */
  }

animationを用いた事例２

回転しながら、背景色が赤→緑→青と変化します。
　

• HTML

  <div class="box"></div>

• CSS

  .box {
    width: 100px;
    height: 100px;
    background: red;
    animation: rotation 3s ease 0s infinite alternate none running;
  }
  
  @keyframes rotation {
    0% {
      transform: scale(.3);
      background: red;
    }
    50% {
      transform: scale(.6) rotate(-45deg);
      background: green;
    }
    100% {
      transform: scale(1) rotate(180deg);
      background: blue;
    }
  }

  
  

animationを用いた事例３

オープニングアニメーションの例

• DEMO：https://koichi-inoue.github.io/CSS_Animation02/
• CODE：https://github.com/koichi-inoue/CSS_Animation02
  　
  既存のサイトに付け足す形で利用できるように、アニメーション要素のみのページにしています。「数秒のアニメーション、その後 [ ENTER ] で本編にジャンプ」という前提のページです。

CSSアニメーションのイベントを取得することも可能なので、JavaScriptが扱える方であれば「特定要素のアニメーション終了と同時に自動で本編表示」という動きも可能です（参考記事>Quiita）。

ライブラリの活用

Animate.css を利用した事例を紹介します。スクロールすると要素が動きながら登場する・・というよくある演出の事例です。

• DEMO：https://koichi-inoue.github.io/CSS_AnimateCSS/
• CODE：https://github.com/koichi-inoue/CSS_AnimateCSS
  
  
  
  

参考

ナビゲーション等にアニメーションを適用する事例は、Web上にたくさん紹介されています。以下、リンクをご覧ください。

• Animate.css - Just-add-water CSS animations
  https://animate.style/
• Hover.css - A collection of CSS3 powered hover effects
  https://ianlunn.github.io/Hover/
• CSSアニメーション入門 qiita.com
  http://qiita.com/soarflat/items/4a302e0cafa21477707f
• ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を再現
  https://cssanimation.rocks/jp/principles/
• スターウォーズ風のオープニング(数行で簡単)