JSFiddle - React, Tailwind, and code Playground
HTML
<div class="smile">☺</div>
CSS
/**
* Move in a circle without wrapper elements
* Idea by Aryeh Gregor, simplified by Lea Verou
*/
@keyframes "rot" {
from {
-webkit-transform: rotate(0deg) translate(-150px) rotate(0deg);
-moz-transform: rotate(0deg) translate(-150px) rotate(0deg);
-o-transform: rotate(0deg) translate(-150px) rotate(0deg);
-ms-transform: rotate(0deg) translate(-150px) rotate(0deg);
transform: rotate(0deg) translate(-150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translate(-150px) rotate(-360deg);
-moz-transform: rotate(360deg) translate(-150px) rotate(-360deg);
-o-transform: rotate(360deg) translate(-150px) rotate(-360deg);
-ms-transform: rotate(360deg) translate(-150px) rotate(-360deg);
transform: rotate(360deg) translate(-150px) rotate(-360deg);
}
}
@-moz-keyframes rot {
from {
-moz-transform: rotate(0deg) translate(-150px) rotate(0deg);
transform: rotate(0deg) translate(-150px) rotate(0deg);
}
to {
-moz-transform: rotate(360deg) translate(-150px) rotate(-360deg);
transform: rotate(360deg) translate(-150px) rotate(-360deg);
}
}
@-webkit-keyframes "rot" {
from {
-webkit-transform: rotate(0deg) translate(-150px) rotate(0deg);
transform: rotate(0deg) translate(-150px) rotate(0deg);
}
to {
-webkit-transform: rotate(360deg) translate(-150px) rotate(-360deg);
transform: rotate(360deg) translate(-150px) rotate(-360deg);
}
}
@-ms-keyframes "rot" {
from {
-ms-transform: rotate(0deg) translate(-150px) rotate(0deg);
transform: rotate(0deg) translate(-150px) rotate(0deg);
}
to {
-ms-transform: rotate(360deg) translate(-150px) rotate(-360deg);
transform: rotate(360deg) translate(-150px) rotate(-360deg);
}
}
@-o-keyframes "rot" {
from {
-o-transform: rotate(0deg) translate(-150px) rotate(0deg);
transform: rotate(0deg) translate(-150px) rotate(0deg);
}
to {
-o-transform: rotate(360deg) translate(-150px) rotate(-360deg);
transform:...