私はCSSでスピナーを作成しましたが、アニメーションなしで中央に配置しましたが、アニメーションを開始するときにスピナーが移動します。具体的には "@キーフレームスピナー"ルールを使用します。
どのように私はそれを中央の位置に保つことができますか?私のスピナーが回転するときのセンターの中心 - CSSアニメーション
.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>
は、あなたの答えありがとうございました。 – DeveloperBeginner