ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。
ボタンの背景にGifアニメを置く方法もありますが、CSSで十分に対応が可能です。
以下がサンプルです。
デフォルトでアニメーションをセットしたサンプル
ボタン
押された時にアニメーションが開始するサンプル
ボタン２
HTMLはこちら
<div class="demo_btn"><span class="demo_bg"></span>ボタン</div>
<div class="demo_btn" id="demo_click"><span></span>ボタン２</div>
CSS
.demo_btn{
display: block;
width: 200px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
border: solid 1px #CCC;
border-radius: 5px;
font-size:12px;
text-align: center;
padding: 3px 0;
margin: 20px auto;
cursor: pointer;
z-index: 1;
}
.demo_btn .demo_bg{
display: block;
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 100%;
height: 200%;
background-color: #FDD;
animation: act_wave 0.18s infinite alternate;
}
@keyframes act_wave {
0% {
top: 50%;
}
100% {
top: 100%;
}
}押されたときの操作はjQueryで実装しています
JS
$("#demo_click").on("click",function(){
$(this).find("span").toggleClass("demo_bg");
});
