Wie zentriere ich meinen Spinner, wenn er rotiert - CSS Animation

Question

Ich habe einen Spinner in CSS erstellt und ich stelle ihn in die Mitte ohne Animation, aber wenn ich mit der Animation beginne, bewegt sich mein Spinner weg. Speziell wenn ich die "@keyframes spinner" -Regel verwende.
Wie kann ich es in der Mitte halten?

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

Answer 1

modifizierte ich die Animation und hat eine transform-origin zum Spinner: D

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform-origin: top left; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg) translate(-50%,-50%); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg) translate(-50%,-50%); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

Answer 2

Flex-Box-Lösung: Anzeigen des Mutterelements als flex Element und richten (vertikal) und rechtfertigen (horizontal) sein absolut zum Zentrum positioniert Kinder.

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    background: gray; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>

Answer 3

Setzen Sie den span in einen anderen Behälter und gelten position: absolute zu diesem Container

.spinner-animation { 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.holder { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.holder .spinner { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation>.content { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 
@keyframes spinner { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <div class="holder"> 
 
    <span class="spinner"></span> 
 
    </div> 
 
    <div class="content">Loading...</div> 
 
</div>

Answer 4

Die transform in der Animation ist das Überschreiben des translate() Positionierung, müssen Sie translate() zu Ihrer Animation hinzufügen transform Eigentum.

.spinner-animation{ 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
    background: gray; 
 
} 
 

 
.spinner-animation > .spinner{ 
 
    width: 400px; 
 
    height: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    border-radius: 50%; 
 
    box-shadow: inset 3px 3px 3px red; 
 
    animation: spinner 1.2s linear infinite; 
 
} 
 

 
.spinner-animation > .content{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    background-color: black; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    color: white; 
 
} 
 

 

 
@keyframes spinner { 
 
    0% { 
 
    transform: translate(-50%,-50%) rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: translate(-50%,-50%) rotate(360deg); 
 
    } 
 
}

<div class="spinner-animation"> 
 
    <span class="spinner"></span> 
 
    <div class="content">Loading...</div> 
 
</div>