MS Edge CSS 애니메이션의 길이가 달라질 때 흔들림이 생깁니다.

Question

MS Edge 브라우저에서 간단한 순환 애니메이션은 애니메이션 지속 시간이 달라지면 매우 거칠어집니다. 다음은 간단한 예제 :

#LogoRotator { z-index: 99; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; border-top-color: #3498db; animation: spin 2s linear infinite; } 
 
#LogoRotator:before { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 50%; border: 1px solid transparent; border-top-color: #e74c3c; } 
 
#LogoRotator:after { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 1px solid transparent; border-top-color: #f9c922; } 
 
@keyframes spin { 100% { transform: rotate(360deg); } } 
 

 
#LogoRotator.varySpeed:before { animation: spin 3s linear infinite; } 
 
#LogoRotator.varySpeed:after { animation: spin 1.5s linear infinite; }

<p>With identical animation durations:</p> 
 
<div id="LogoRotator"></div> 
 

 
<p>With different animation durations:</p> 
 
<div id="LogoRotator" class="varySpeed"></div>

당신이 가장자리에이 조각을 보는 경우가있을 때 동일한 애니메이션은 움직임이 매우 부드럽고 속도 것을 볼 수 있지만거야 빨리 시간이 변경으로 운동은 사방에 점프 : 시간이 변할 때 애니메이션이 부드럽게 만들 수있는 방법은

있습니까?

Answer 1

overflow : hidden; #LogoRotator, #LogoRotator : before 및 #LogoRotator : 이후