マウスオーバーで動き出す「からくりボタン」の作り方：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（4）（2/3 ページ）
2）遅れて動き出すアニメーション
次に、シャッターが開いた後の、暗闇の中のアニメーションを作ります。
ニヤリとした目のイラストと「Watch It!」という文字の組み合わせをclass「eyes」として、繰り返し左右にバウンドする矢印の<div>タグをclass「arrow」として、それぞれHTMLに追加します。その際、これらがアニメーションする黒地のステージを用意します。「stage」というclass名にした<div>タグで入れ子にします。
<a href="#" class="watchit"> <div class="shutter-top">Secret...</div> <div class="shutter-bottom">Secret...</div> <div class="stage"> <div class="eyes">Watch It!</div> <div class="arrow"></div> </div><!-- stage --> </a>
初めに「stage」のCSS設定をします。
/*========シャッターの後ろの黒いステージ========*/
.stage{
position:absolute;
width:198px;
height:48px;
top:1px;
left:1px;
background:#333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index:-1;
}
サイズは<a>タグと同じく幅200×50pxで良いはずなのですが、角丸にしているため、四隅に黒い点々のフリンジが出てしまいます。なので、幅198×48pxとして、上下左右に1pxずつだけ全体に小さくして中に入れます。また、このレイヤー階層をシャッターの後ろに回すため、「z-index:-1;」とします。
次に、ニヤリとした目のイラストと「Watch It!」の文字の組み合わせ（class名「eyes」）と、繰り返し左右にバウンドする矢印（class名「arrow」）のCSSを設定して配置します。
/*========ニヤリとした目のイラストと「Watch It!」========*/
.eyes{
position:absolute;
width:100px;
height:23px;
top:13px;
left:20px;
padding:6px 0 0 43px;
background:url(images/eyes.png) no-repeat;
color:#fff;
}
/*========左右にバウンドする矢印========*/
.arrow{
position:absolute;
width:32px;
height:25px;
top:12px;
right:30px;
background:url(images/arrow.png) no-repeat;
}
これで、静止した状態までは完成しました。下のサンプルで確認してみましょう。
これにアニメーションを付けていきます。
まずは、左右にバウンドする矢印からです。この矢印は、シャッターが開いていようが閉まっていようが、常に繰り返し左右に動いているようにします。「animation」プロパティを使います。
/*========左右にバウンドする矢印========*/
.arrow{
position:absolute;
width:32px;
height:25px;
top:12px;
right:30px;
background:url(images/arrow.png) no-repeat;
animation: arw 0.5s ease infinite alternate;
}
@keyframes arw {
0% {right:30px;}
100% {right:10px;}
}
「animation: arw 0.5s ease infinite alternate;」によって、「『arw』というキーフレーム名のアニメーション動作を0.5秒かけて実施する。このアニメーションは無限に、往復して繰り返す」と指定しました。
また、「arw」のアニメーション動作は、「『stage』に対して、右から30pxのところからスタートし、10pxのところで終わる」としています。これが無限に往復して繰り返されることで、左右にバウンドし続けるような動きを実現します。
次に、黒いステージ上のこれらの要素を、シャッターが閉じているときは透明に、シャッターが開いたら透明度なしにするようにします。文字色などのCSSプロパティではなく、<div>タグなどのHTML要素そのものを透明にするには、「opacity」プロパティを使います。マウスオーバーする前を「0」、マウスオーバーした後を「1」にします。
/*========ニヤリとした目のイラストと「Watch It!」========*/
.eyes{
position:absolute;
width:100px;
height:23px;
top:13px;
left:20px;
padding:6px 0 0 43px;
background:url(images/eyes.png) no-repeat;
color:#fff;
opacity:0;
}
/*========左右にバウンドする矢印========*/
.arrow{
position:absolute;
width:32px;
height:25px;
top:12px;
right:30px;
background:url(images/arrow.png) no-repeat;
animation: arw 0.5s ease infinite alternate;
opacity:0;
}
/*========ボタンエリアにマウスオーバーしたときのニヤリとした目のイラストと「Watch It!」========*/
a.watchit:hover .eyes{
opacity:1;
}
/*========ボタンエリアにマウスオーバーしたときの左右にバウンドする矢印========*/
a.watchit:hover .arrow{
opacity:1;
}
ただ、これだけでは、シャッターの向こうに隠れている状態で瞬時に変わっているため、表示が透明から不透明に切り替わっているのかが分かりませんね。そこで、シャッターが開いてから、ふわっと闇の中に現れるような演出にする目的も含め、マウスオーバー後、時間を置いてから透明度が変化し始めるようにしたいと思います。
それには、「transition-delay」プロパティを使います。
/*========ニヤリとした目のイラストと「Watch It!」========*/
.eyes{
position:absolute;
width:100px;
height:23px;
top:13px;
left:20px;
padding:6px 0 0 43px;
background:url(images/eyes.png) no-repeat;
color:#fff;
opacity:0;
transition-property:opacity;
transition-duration:0.2s;
transition-delay:0.3s;
}
シャッターを開くアニメーションは、マウスオーバー後0.2秒をかけて行われます。なので、ニヤリとした目のイラストと「Watch It!」は、「マウスオーバーして0.3秒経ってから、『opacity』プロパティに対して0.2秒間のアニメーションを実施」して表示するように指定しました。
また、左右にバウンドする矢印のほうはさらに時間を置いて、マウスオーバーしてから0.5秒後に表示するようにしてみます。両方同時に登場するよりも、少し時差を作ったほうが「流れ」が生まれます。
/*========左右にバウンドする矢印========*/
.arrow{
position:absolute;
width:32px;
height:25px;
top:12px;
right:30px;
background:url(images/arrow.png) no-repeat;
animation: arw 0.5s ease infinite alternate;
opacity:0;
transition-property:opacity;
transition-duration:0.2s;
transition-delay:0.5s;
}
最後に、どのようなアニメーションがあっても、このボタン全体を常に立体に保つように、ベベルを設定します。中身のない「<div class="bevel"></div>」をHTMLに記述します。
<a href="#" class="watchit"> <div class="shutter-top">Secret...</div> <div class="shutter-bottom">Secret...</div> <div class="stage"> <div class="eyes">Watch It!</div> <div class="arrow"></div> </div><!-- stage --> <div class="bevel"></div> </a>
この空の<div>タグに対し、左端と上端に半透明の白色、右端と下端に半透明の黒色を指定して、ベベル状態を表現します。「box-shadow」プロパティで、<div>タグの外側ではなく、「inset」で内側に影（＝指定した色と透明度）が落ちるようにします。これをボタンの上に常時かぶせておくことで、立体感を保たせます。
/*========ボタンエリアに常に設定するボタンのベベル指定========*/
.bevel{
position:absolute;
width:200px;
height:50px;
box-shadow:inset 2px 2px 3px rgba(255,255,255,0.5), inset -2px -2px 3px rgba(0,0,0,0.2);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
これで完成です。あとは、CSSのソース全体に対して、利用を想定しているブラウザに合わせてベンダプレフィックスを付けて、「transition」「animation」各プロパティを増やせばOKです。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。