왜 회전 애니메이션이 컨테이너의 위치에 영향을 줍니까?

나는 그렇게처럼 내 웹 페이지에 회전하는 원 로딩 아이콘을 만들려고 :왜 회전 애니메이션이 컨테이너의 위치에 영향을 줍니까?

CSS :

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

div#spinningCircleBox { 
    width: 6.25vw; 
    height: 6.25vw; 
    position: fixed; 
    background-color: rgba(255, 255, 255, 0); 
    left: 50vw; 
    top: 50vh; 
    transform: translateX(-50%) translateY(-50%); 
    box-sizing: border-box; 
    animation: spin 1s infinite linear; 
    border: solid 1px red; 
} 

div#circleBlockMask { 
    width: 3.125vw; 
    height: 3.125vw; 
    position: fixed; 
    box-sizing: border-box; 
    left: 0; 
    top: 0; 
    overflow: hidden; 
} 

div#spinningCircle { 
    width: 6.25vw; 
    height: 6.25vw; 
    position: relative; 
    border: solid 8px aliceblue; 
    background-color: rgba(255, 255, 255, 0); 
    border-radius: 10vw; 
    box-sizing: border-box; 
    left: 0; 
    top: 0; 
} 

div#circleWrapper { 
    width: 6.5vw; 
    height: 6.5vw; 
    box-sizing: border-box; 
    border: solid 12px white; 
    border-radius: 10vw; 
    left: 50vw; 
    top: 50vh; 
    position: fixed; 
    transform: translateX(-50%) translateY(-50%); 
    border: solid 1px yellow; 

}

HTML :

<body> 
[...] 
<div id="spinningCircleBox"> 
     <!--div id="circleBlockMask"> 
      <div id="spinningCircle"></div> 
     </div--> 
    </div> 
<div id="circleWrapper"></div> 
[...] 
</body>

그러나 무슨 일입니다 애니메이션 작동하지만 "이동 " 'spinningCircleBox'멀리. ,

당신은 (그것은 차이를 보여 바로 거기에, 나는 "circleWrapper"라고 불렀다) 노란색 상자가 있음을 알 수는 중간에 제대로 정렬되어 수직 및 수평 중심 : 나는 스크린 샷을 첨부.
spinningCircleBox의 스핀 애니메이션을 사용하지 않도록 설정하면 올바르게 정렬되지만 어떤 이유로 애니메이션이 활성화 된 상태에서 컨테이너 ("spinningCircleBox")가 중간에 배치되지 않습니다.

나를 도와 줄 수 있습니까? 애니메이션, 당신의 요소에서

transform: translateX(-50%) translateY(-50%);

을 덮어되는이 애니메이션도 추가 수정하기 때문에 무슨 일이 일어나고

출처

2017-10-31 T.Meyer

때문에 애니메이션 ** 원래 변형을 재정의합니다. –

맞아, 고마워. –

...

body{ 
 
    background:blue; 
 
} 
 
@keyframes spin { 
 
    0% {transform: translateX(-50%) translateY(-50%) rotate(0deg) } 
 
    100% {transform: translateX(-50%) translateY(-50%) rotate(360deg)} 
 
} 
 

 
div#spinningCircleBox { 
 
    width: 6.25vw; 
 
    height: 6.25vw; 
 
    position: fixed; 
 
    background-color: rgba(255, 255, 255, 0); 
 
    left: 50vw; 
 
    top: 50vh; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    box-sizing: border-box; 
 
    animation: spin 1s infinite linear; 
 
    border: solid 1px red; 
 
} 
 

 
div#circleBlockMask { 
 
    width: 3.125vw; 
 
    height: 3.125vw; 
 
    position: fixed; 
 
    box-sizing: border-box; 
 
    left: 0; 
 
    top: 0; 
 
    overflow: hidden; 
 
} 
 

 
div#spinningCircle { 
 
    width: 6.25vw; 
 
    height: 6.25vw; 
 
    position: relative; 
 
    border: solid 8px aliceblue; 
 
    background-color: rgba(255, 255, 255, 0); 
 
    border-radius: 10vw; 
 
    box-sizing: border-box; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
div#circleWrapper { 
 
    width: 6.5vw; 
 
    height: 6.5vw; 
 
    box-sizing: border-box; 
 
    border: solid 12px white; 
 
    border-radius: 10vw; 
 
    left: 50vw; 
 
    top: 50vh; 
 
    position: fixed; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    border: solid 1px yellow; 
 

 
}

<div id="spinningCircleBox"> 
 
     <!--div id="circleBlockMask"> 
 
      <div id="spinningCircle"></div> 
 
     </div--> 
 
    </div> 
 
<div id="circleWrapper"></div>

출처

2017-10-31 12:53:26

나는 그것을 몰랐다. 답변 해 주셔서 감사합니다. –

왜 회전 애니메이션이 컨테이너의 위치에 영향을 줍니까?

답변

관련 문제