2013.07.10
css

CSS3 アニメーションボタンの基礎

CSS3の@keyframesを使ったアニメーションの使い方はこちらで紹介しましたが、もっと実用的に使いたい…。

やっぱりマウスオーバーした際にフラッシュみたいにスムーズに動いたら素敵です。
ではマウスオーバー時にボタンがアニメーションする方法を紹介します。
css028

CSSだけでできるマウスオーバーしたら動くボタン

1.基本形

CSS3以前でもアニメーションはせずともホバー時に背景色や背景画像などを入れ替えることができました。
しかし、入れ替えるだけのため、カチッと一瞬で変わるだけのものでした。
CSS3ではその変化をだんだんと変化するようにするアニメーションすることができます。

HTMLソース
<a href="#"><div class="animation_button">拡大するButton</div></a>
CSSソース
.animation_button{
    background:#FF99CC;
    width:80px;
    height:60px;
    margin:10px auto;
    text-align:center;
    line-height:1.4;
    padding:30px 10px 10px;
    font-weight:bold;
    border-radius: 80px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    -o-border-radius: 80px;
    -ms-border-radius: 80px;
    transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    -moz-transform: scale(0.9, 0.9);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
}
.animation_button:hover{
    transform: scale( 1.1 );
    -webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
    background:#fbca4d;
}

2.画像(jpegなど)を使用

基本的には1.と同じです。
ボタン部分に画像を挿入することもできます。

HTMLソース
<a href="#"><div class="animation_button2">
    <img src="画像のパス.jpg" />
</div></a>
CSSソース
.animation_button2{
    width:176px;/*画像のwidth*/
    height:217px;/*画像のheight*/
    margin:10px auto;
    transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    -moz-transform: scale(0.9, 0.9);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
}
.animation_button2:hover {
    transform: scale( 1.1 );
    -webkit-transform: scale( 1.1 );
    -moz-transform: scale( 1.1 );
}

HTMLで画像を挿入しましたが、CSSで.animation_button2にbackgroundとして画像を挿入してもOKです。

3.@keyframes使用

マウスオーバー時に無限に、もしくは特定の回数だけアニメーションを繰り返したいときはこの方法でできます。

HTMLソース
<a href="#"><div class="animation_button3">動き続けるButton</div></a>
CSSソース
.animation_button3 {
    background:#7fffd4;
    width:80px;
    height:60px;
    margin:10px auto;
    text-align:center;
    line-height:1.4;
    padding:30px 10px 10px;
    font-weight:bold;border-radius: 80px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    -o-border-radius: 80px;
    -ms-border-radius: 80px;
    transiton:all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.animation_button3:hover{
    background:#adff2f;
    animation: inout 0.5s;
    animation-iteration-count: infinite;
    -webkit-animation: inout 0.5s; 
    -webkit-animation-iteration-count: infinite;
}
@keyframes inout {
    0% { transform: scale(0.9, 0.9); }
    50% { transform: scale(1, 1); }
    100% { transform: scale(0.9, 0.9); }
}
@-webkit-keyframes inout { 
    0% { -webkit-transform: scale(0.9, 0.9); }
    50% { -webkit-transform: scale(1, 1); }
    100% { -webkit-transform: scale(0.9, 0.9); }
}

CSSこう見ると長いですが、クロスブラウザ対策をするとどうしてもこうなってしまいます。
本当はシンプルなのに・・・。
早くブラウザごとに設定しなくても良くなってほしいですね。

今回はscale()を使いましたが、translate()、rotate()、skew()を使ってみるのも良いですね。

関連する記事

コメント & トラックバック
  1. […] >>CSS3だけでボタンをアニメーションする際の基礎 Author: […]


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP