<div class="swingHorizontal">Hover me</div>
<style>
.swingHorizontal:hover {
animation: swingHorizontal 1s ease;
color: pink;
}
@keyframes swingHorizontal {
15% {
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(3px);
}
65% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
}
</style>