CSS3でかっこいいボタンを作ろう【第四回：上級編（animation）】

CSS3でボタンを作るシリーズ最終回。

対応ブラウザ：Chrome, Safari, Firefox5+

今回はダメ押しの『animation』について。CSS3でのアニメーションといえば前回紹介した『transition』がありますが、『transition』で作成できるアニメーションは状態A→状態Bのような単純なものです。『animation』はキーフレームを使用してより複雑なアニメーションを作成できます。正直ボタン作るのにここまでする必要は無いと思いますが、いい機会なのでまとめて学んじゃいましょう。

過去記事はこちら
第一回：入門編（border-radius、text-shadow）
第二回：初級編（box-shadow、gradient）
第三回：中級編（RGBa、@font-face、transition）

キーフレームの設定

アニメーションの作成は『キーフレーム』で行います。キーフレームとはFlashやDTMで言うところのタイムラインのようなものです。時間軸に沿って「このタイミングでこう動く」というのを定義するものです。下の例を見た方が解りやすいかもしれません。

@-webkit-keyframes jump {
  0%{ bottom: 0;}
  10% { bottom: 6px;}
  70% { bottom: 10px;}
  90% { bottom: 1px;}
  100% { bottom: 0;}
}

ここでは「jump」という名前のアニメーションを定義しています。後に設定するアニメーション時間の中で、アクションを起こすタイミングを%で指定します。例えば時間を1.0sに設定すると、

といった感じで、1秒間のうちに「10px上に移動して元の位置に戻る」というジャンプするアニメーションを定義しています。（ちょっと変則的なジャンプですが）

animationの各プロパティ

それでは実際に動かす前にmanimationで指定することが出来る各プロパティを見てみましょう。

animation-name

実行するアニメーションの名前です。先程の例だと「jump」です。

animation-duration

アニメーションを行う時間です。単位sで指定します。

animation-timing-function

どのようにアニメーションさせるかを指定します。「linear」で一定のスピード、「ease-in-out」でゆっくり始まりゆっくり終わる。この後の例ではゆっくり終わる「ease-out」を指定しています。

animation-iteration-count

アニメーションの繰り返し回数を指定します。ずっと続ける場合は「infinite」を指定します。

そして例によってこれらを「animation」でまとめて指定することが可能です。

animationの実行

それでは実際に動かしてみましょう。まずは前回までに作ったボタンを再現してみます。

html

<a href="#" class="button">Button</a>

css

@font-face {
  font-family: Play;
  src: url("フォントファイルへのパス/Play-bold.eot");
}
@font-face {
  font-family: Play;
  src: url("フォントファイルへのパス/Play-bold.ttf") format("truetype");
}

a.button{
  display: inline-block;
  padding: 0.5em 1em;
  background: #cccccc;
  border: 1px solid #666666;
  border-radius: 10px;
  color: #000000;
  font-family: 'Play';
  font-size: 30px;
  line-height: 1;
  text-shadow: 0px 1px 1px #ffffff;
  -webkit-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  -moz-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888));
  background-image: -moz-linear-gradient(top, #dddddd, #888888);
  background-image: -o-linear-gradient(top, #dddddd, #888888);
  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -ms-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
}

a.button:hover{
  color: #ffffff;
}

Button

これに先程例で使った「jump」というアニメーションを与えます。position移動を行うので本体にposition: relative;とbottom: 0;を付け足しています。さらに、Firefoxのために-moz-のバージョンも付け足しました。（Firefoxは5からanimationに対応）

@font-face {
  font-family: Play;
  src: url("フォントファイルへのパス/Play-bold.eot"),
}
@font-face {
  font-family: Play;
  src: url("フォントファイルへのパス/Play-bold.ttf") format("truetype");
}

@-webkit-keyframes jump {
  0%{ bottom: 0;}
  10% { bottom: 6px;}
  70% { bottom: 10px;}
  90% { bottom: 1px;}
  100% { bottom: 0;}
}
@-moz-keyframes jump {
  0%{ bottom: 0;}
  10% { bottom: 6px;}
  70% { bottom: 10px;}
  90% { bottom: 1px;}
  100% { bottom: 0;}
}

a.button{
  position: relative;
  bottom: 0;
  display: inline-block;
  padding: 0.5em 1em;
  background: #cccccc;
  border: 1px solid #666666;
  border-radius: 10px;
  color: #000000;
  font-family: 'Play';
  font-size: 30px;
  line-height: 1;
  text-shadow: 0px 1px 1px #ffffff;
  -webkit-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  -moz-box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  box-shadow: inset 0 0.9em 2px rgba(255, 255, 255, 0.3),  0 1px 5px 0 #bbb, inset 0 1px 1px #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#888888));
  background-image: -moz-linear-gradient(top, #dddddd, #888888);
  background-image: -o-linear-gradient(top, #dddddd, #888888);
  -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -ms-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
}

a.button:hover{
  color: #ffffff;
  -webkit-animation: jump 0.7s ease-out infinite;
  -moz-animation: jump 0.7s ease-out infinite;
}

いかがでしょうか？対応ブラウザなら下のボタンをマウスオーバーすると、ピョンピョンとMacのDockアプリケーションのようにジャンプするはずです。

Button

総括

さて、4回に渡ってお送りしました『CSS3でかっこいいボタンを作ろう』シリーズも今回でおしまいです。今回は「ボタン」というお題でしたので装飾系のCSS3が多かったですが、この他にもメディアクエリやボックスレイアウト、進化したセレクタなど、CSS3には魅力がいっぱいです！またいつか機会があれば紹介したいと思います。それでは最後になりますが、この長い長いシリーズを最後までおつきあい頂きありがとうございました。