CSSのアニメを使ってやわらかい表現を付加します。
表示時とクリックしたときに発動するサンプルです。
クラスを設定すれば、要素は画像でもSVGでも文字でも適用できます。
以下の要素をクリックしてください。
CSSは以下のように書きました
<style>
.poyon {
animation: poyon 1.0s linear 0s ;
cursor:pointer;
}
.demo_area{
background-color: #CCC;
width: 200px;
height: 200px;
margin: 20px;
}
@keyframes poyon {
0% { transform: scale(0.8, 1.4) translate(0%, -100%); }
10% { transform: scale(0.8, 1.4) translate(0%, -15%); }
20% { transform: scale(1.4, 0.6) translate(0%, 30%); }
30% { transform: scale(0.9, 1.1) translate(0%, -10%); }
40% { transform: scale(0.95, 1.2) translate(0%, -30%); }
50% { transform: scale(0.95, 1.2) translate(0%, -10%); }
60% { transform: scale(1.1, 0.9) translate(0%, 5%); }
70% { transform: scale(1.0, 1.0) translate(0%, 0%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
</style>
クリックで発動するJSのサンプルはこちら
<script>
$(document).ready(function(){
$(".poyon").on('click',function(){
$(this).removeClass("poyon").delay(200).queue(function(next) {
$(this).addClass('poyon');
next();
});
});
});
</script>
HTMLはこちら
<div class="demo_area">
<div class="poyon">
<svg width=200 height=200 class="bg">
<circle cx="100" cy="100" r="90" stroke="black" stroke-width="0" fill="#69F"/>
</svg>
</div>
</div>
