I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've included a jsfiddle link below that demonstrates the issue.
Here is the HTML code:
<div class="parent">
<div class="child">This is child</div>
</div>
And here is the CSS code:
@-webkit-keyframes rotate {
from{ -webkit-transform: rotate(0deg); }
to{ -webkit-transform: rotate(360deg); }
}
.parent {
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
position: relative;
top: 25%;
border: 10px dashed red;
-webkit-animation: rotate 12s linear infinite;
}
.child {
position: absolute;
color: #fff;
-webkit-animation: none !important;
}