PRESSMAN*Tech

HTML5, CSS3からWordPress, AWS, Elasticsearchまで。プレスマンのスタッフが綴る技術ブログ。

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(&quot;フォントファイルへのパス/Play-bold.eot&quot;),
}
@font-face {
font-family: Play;
src: url(&quot;フォントファイルへのパス/Play-bold.ttf&quot;) format(&quot;truetype&quot;);
}
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(&quot;フォントファイルへのパス/Play-bold.eot&quot;),
}
@font-face {
font-family: Play;
src: url(&quot;フォントファイルへのパス/Play-bold.ttf&quot;) format(&quot;truetype&quot;);
}
@-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には魅力がいっぱいです!またいつか機会があれば紹介したいと思います。それでは最後になりますが、この長い長いシリーズを最後までおつきあい頂きありがとうございました。

投稿者:Itoh
このエントリーをはてなブックマークに追加

私たちと一緒に働きませんか?

株式会社プレスマンでは、コーディングが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

プレスマンの採用情報を見る →

コメントは受け付けていません。

▲ 先頭へ戻る