IT

CSS3仕様だけで作る簡単なボタンアニメーション

-->

はじめまして、山中です。
今日はWebページの簡単なアニメーションをご紹介します。
下記それぞれのボタンにマウスカーソルを乗せて頂ければ、アニメーションが動きます。

楕円を中央から外側へ広げる

Button1

CSS

.btn:hover .animation-01 {                     /* ボタン要素のホバー時、子要素にスタイルを適用します */
  border-radius:             50%;              /* 要素のボーダーを丸くします                         */
  animation-name:            inner-to-outer;   /* inner-to-outerを使用します                         */
  animation-duration:        0.7s;             /* 実行期間を 0.7秒 とします                          */
  animation-iteration-count: 1;                /* １回だけ実行します                                 */
  animation-fill-mode:       forwards;         /* 終了時点で静止します                               */
}
@keyframes inner-to-outer {
  from {                                       /* 横幅0px、高さ0pxで開始を定義します              */
    width:  0px;
    height: 0px;
  }
  to {                                         /* 横幅200px、高さ40px、濃度60%で終了を定義します  */
    width:   200px;
    height:  40px;
    opacity: 0.6;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text">Button1</div>
  <div class="btn-animation-center animation-01"></div>   ←この要素をアニメーションさせます
</div>

CSSでのアニメーションにはtransitionを使う方法もありますが、今回はkeyframesを使うようにしています。

四角形を中央から外側へ広げる

Button2

CSS

.btn:hover .animation-02 {
  animation-name:            inner-to-outer; /* inner-to-outer をします   */
  animation-duration:        0.7s;           /* 実行期間を 0.7秒 とします */
  animation-iteration-count: 1;              /* １回だけ実行します        */
  animation-fill-mode:       forwards;       /* 終了時点で静止します      */
}
@keyframes inner-to-outer {
  from {                                     /* 横幅0px、高さ0pxで開始を定義します              */
    width:  0px;
    height: 0px;
  }
  to {                                       /* 横幅200px、高さ40px、濃度60%で終了を定義します  */
    width:   200px;
    height:  40px;
    opacity: 0.6;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text">Button2</div>
  <div class="btn-animation-center animation-02"></div>
</div>

四角形を左上から右下へ広げる

Button3

CSS

.btn:hover .animation-03 {
  animation-name:            top-left-to-bottom-right; /* top-left-to-bottom-right を使用します */
  animation-duration:        0.7s;                     /* 実行期間を 0.7秒 とします             */
  animation-iteration-count: 1;                        /* １回だけ実行します                    */
  animation-fill-mode:       forwards;                 /* 終了時点で静止します                  */
}
@keyframes top-left-to-bottom-right {
  from {                                               /* 横幅0px、高さ0pxで開始を定義します               */
    width:  0px;
    height: 0px;
  }
  to {                                                 /* 横幅200px、高さ40px、透明度60%で終了を定義します */
    width:   200px;
    height:  40px;
    opacity: 0.6;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text">Button3</div>
  <div class="btn-animation-top-left animation-03"></div>
</div>

四角形を左から右へ広げる

Button4

CSS

.btn:hover .animation-04 {
  animation-name:            left-to-right; /* left-to-right を使用します */
  animation-duration:        0.7s;          /* 実行期間を 0.7秒 とします  */
  animation-iteration-count: 1;             /* １回だけ実行します         */
  animation-fill-mode:       forwards;      /* 終了時点で静止します       */
}
@keyframes left-to-right {
  from {                                    /* 横幅0px、高さ40pxで開始を定義します              */
    width:  0px;
    height: 40px;
  }
  to {                                      /* 横幅200px、高さ40px、透明度60%で終了を定義します */
    width:   200px;
    height:  40px;
    opacity: 0.6;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text">Button4</div>
  <div class="btn-animation-top-left animation-04"></div>
</div>

文字を上下に揺さぶる

Button5

CSS

.btn:hover .animation-05 {
  animation-name:            sway;     /* sway を使用します         */
  animation-duration:        0.5s;     /* 実行期間を 0.5秒 とします */
  animation-iteration-count: 1;        /* １回だけ実行します        */
  animation-fill-mode:       forwards; /* 終了時点で静止します      */
}
@keyframes sway {
  0% {                                 /* 開始時点の高さを20pxとします */
    height: 20px;
  }
  50% {
    height: 25px;
  }
  60% {
    height: 18px;
  }
  70% {
    height: 15px;
  }
  80% {
    height: 18px;
  }
  100% {
    height: 15px;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text animation-05">Button5</div>
</div>

文字を大きくしつつ中央に揃える

Button6

CSS

.btn:hover .animation-06 {
  animation-name:            to-big;   /* to-big を使用します       */
  animation-duration:        0.5s;     /* 実行期間を 0.5秒 とします */
  animation-iteration-count: 1;        /* １回だけ実行します        */
  animation-fill-mode:       forwards; /* 終了時点で静止します      */
}
@keyframes to-big {
  to {                                 /* 文字サイズ18pt, 行高さ27pxで終了を定義します */
    font-size:   18pt;
    line-height: 27px;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text animation-06">Button6</div>
</div>

文字と背景を点滅する

Button7

CSS

.btn:hover .animation-07 {
  animation-name:            blink;    /* to-big を使用します       */
  animation-duration:        1.1s;     /* 実行期間を 1.1秒 とします */
  animation-iteration-count: infinite; /* 無限に繰り返します        */
}
@keyframes blink {
  from {                               /* 開始時の色を定義します             */
    color:            #ddd;
    background-color: #000;
  }
  to {                                 /* 開始時点と逆の色で終了を定義します */
    color:            #000;
    background-color: #ddd;
  }
}

HTML

<div class="btn other-style">
  <div class="btn-text animation-07">Button7</div>
</div>

如何でしたでしょうか、CSS仕様だけでも簡単なアニメーションであれば実現できます。
「CSS以外は使っちゃダメ!」と言われている場合にお勧めします。
今回は細かい説明を抜きにして、ソースコードと実際の動作だけとしました。
JavaScriptライブラリを使えば、もっと複雑なアニメーションを組み上げる事も可能です。
これらの内容も提示するには、記事が大きくなり過ぎますので、それはまた別の機会にという事で。
閲覧ありがとうございました。

仕様の参照先

• (W3C) CSS Animations W3C Working Draft 19 February 2013

+共通CSS(上記CSSの不足分です、ここをクリックで開閉します)

.other-style {
  display:          block;
  position:         relative;
  margin:           0 auto;
  color:            white;
  background-color: black;
  cursor:           pointer;
}
.btn {
  width:  200px;
  height: 40px;
}
.btn-text {
  position:    absolute;
  top:         0;
  left:        0;
  right:       0;
  bottom:      0;
  height:      20px;
  line-height: 20px;
  margin:      auto;
  text-align:  center;
  font-weight: 900;
}
.btn-animation-center {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;
  width:            200px;
  height:           40px;
  margin:           auto;
  text-align:       center;
  background-color: #ddd;
  opacity:          0;
}
.btn-animation-top-left {
  position:         absolute;
  top:              0;
  left:             0;
  width:            200px;
  height:           40px;
  background-color: #ddd;
  opacity:          0;
}
.btn:active {
  animation-name:            click-behavior;
  animation-duration:        0.8s;
  animation-iteration-count: 1;
  animation-fill-mode:       forwards;
}
@keyframes click-behavior {
  to {
    transform: rotate(360deg);
  }
}

-->