JSFiddle - React, Tailwind, and code Playground
HTML
<div class="pulsating-rotation">🔄</div>
CSS
@keyframes pulsate {
0% {
transform: scale(1) rotate(0deg) translateZ(0);
}
50% {
transform: scale(1.2) rotate(180deg) translateZ(100px);
}
100% {
transform: scale(1) rotate(360deg) translateZ(0);
}
}
.pulsating-rotation {
display: inline-block;
font-size: 2em;
animation: pulsate 2s infinite ease-in-out;
}