Question:
Let's say there is a div that, with the help of CSS animation, "spins" without stopping. Inside it there is a div with text that is also spinning. Is it possible to make a child div "stand" in place and be excluded from the animation using CSS?
Answer:
Pseudo element option
Example
*{
box-sizing: border-box;
}
.circle{
width: 100px;
height: 100px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.circle:before{
content: '';
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
border: 2px solid #ccc;
border-right-color: #f00;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}<div class="circle">
<div class="circle__text">
Text
</div>
</div>