JSFiddle - React, Tailwind, and code Playground
by vi161
HTML
<p clASS="p1">
</p>
<p class="p2">
</p>
CSS
p{
border: 3px solid black;
width: 100px;
height: 50px;
}
.p2{
border: 3px solid red;
width: 100px;
height: 50px;
}
.p1{
animation: circle 1s infinite;
animation-delay: 1s;
}
.p2{
animation: circle 1s infinite;
animation-delay: 3s;
}
@keyframes circle {
from {
/* transform: rotate(0deg) scale(2, 1); */
transform: rotate3d(2, 0, 0, 0deg) ;
}
to {
/* transform: rotate(360deg) scale(2, 1); */
transform: rotate3d(2, 0, 0, 180deg) ;
}
}