transformでrotateとscaleの変形を同時に行います。半角スペースで区切って並べて記述します。写真上にマウスがのると,ユラユラ動きながら一回り大きくなります。
<style>
@keyframes zoom2 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(3deg) scale(1.05);
}
100% {
transform: rotate(-3deg) scale(1.1);
}
}
img.zoom2:hover {
animation-name:zoom2;
animation-duration:0.2s;
animation-timing-function:ease-out;
animation-fill-mode: forwards;
}
</style>
<img class="zoom2" src="./?action=common_download_main&upload_id=102" alt="" title="" hspace="0" vspace="0" style="border:0px solid rgb(204, 204, 204);float:none;" />