JSFiddle - React, Tailwind, and code Playground
by sramam
HTML
<html>
<head>
</head>
<body>
<div class="s-spinning" style="min-width:50px; max-width:50px; min-height:50px; background-color:#d33"></div>
</body>
</html>
CSS
@-webkit-keyframes moving {
0% {
-webkit-transform: translate(3px, -3px);
}
1% {
-webkit-transform: translate(-3px, 3px);
}
}
@-webkit-keyframes spinning {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.s-spinning {
-webkit-transform-origin: center center;
-webkit-animation: moving 15ms;
-webkit-animation-iteration-count:20;
-webkit-animation-timing-function: linear;
}