JSFiddle - React, Tailwind, and code Playground
HTML
<div>
</div>
<img...
CSS
body {
background: black;
}
img {
animation: spin 6s ease-in-out infinite;
animation-direction: alternate;
transform: rotate(-90deg);
}
div {
position:absolute;
left: 328px;
top: 150px;
width: 38px;
height: 100px;
background: black;
z-index: 100;
opacity: 1;
animation: fade 6s ease-in-out infinite;
animation-direction: alternate;
}
@keyframes spin {
from {
transform: rotate(-90deg);
}
40% {
transform: rotate(-90deg);
}
80% {
transform: rotate(0deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes fade {
from {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
to {
opacity: 0;
}
}