JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div>E</div>
CSS
div {
position: absolute;
font-size: 140px;
left: 40%;
top: 10%;
transform-origin: bottom;
}
div:hover {
animation: ease-in-out 1s a;
}
@keyframes a {
20% {
transform: scaleY(0.5)
}
40% {
transform: scaleY(1)
}
60% {
transform: scaleY(0.5)
}
70% {
transform: scaleY(1)
}
80% {
transform: scaleY(0.5)
}
100% {
transform: scaleY(1)
}
}