動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋：クリックアクション(クリックで動かす)

<!-header部に記載->
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>

<div class=”wrapper”>

<div class=”box zoomInClickTrigger”>クリックで1回だけぶわっ！ぽんっ！（ズームイン）</div>

<div class=”box zoomInClickTriggerTimes”>クリックで無限にぶわ！ぽんっ！（ズームイン）</div>

</div>

@charset “utf-8”;
.wrapper{
overflow: hidden;
}

.flex{
display:flex;
flex-wrap: wrap;
}

.box{
width: 220px;
padding: 20px;
margin:0 20px 20px 0;
background: #666;
color: #fff;
box-sizing:border-box;
cursor: pointer;
}

.zoomIn{
animation-name: zoomInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
from {
transform: scale(0.6);
}

to {
transform: scale(1);
}
}

$(‘.zoomInClickTrigger’).on(‘click’, function() {$(this).addClass(‘zoomIn’);})

$(‘.zoomInClickTriggerTimes’).on(‘click’, function() {$(this).addClass(‘zoomIn’);
$(“.zoomIn”).on(‘animationend’, function(){$(this).removeClass(‘zoomIn’);
});
});