Hover Animation

Animations can be triggered on hover.

Preview

Code

<style>
.box{
width:80px;
height:80px;
background:#06b6d4;
}

.box:hover{
animation:shake 0.4s;
}

@keyframes shake{
0%{transform:translateX(0);}
25%{transform:translateX(-5px);}
50%{transform:translateX(5px);}
75%{transform:translateX(-5px);}
100%{transform:translateX(0);}
}
</style>

<div class="box"></div>

More CSS Animations Examples (8)