내 CSS3 애니메이션이 Safari에서 작동하지 않는 이유는 무엇입니까?

Safari에서 CSS3 애니메이션이 올바르게 표시되지 않음

CSS3 애니메이션은 일반적으로 대부분의 최신 브라우저에서 원활하게 작동합니다. 그러나 Safari에서 사용할 때 문제가 발생하여 움직임이 부족하거나 잘못된 렌더링이 발생할 수 있습니다. 여기에서는 키암 애니메이션이 Safari 내에서 제대로 실행되지 않는 사례 중 하나를 보여줍니다.

문제: CSS3 애니메이션이 Safari에서 작동하지 않습니다

제공된 코드는 다음과 같습니다. 요소를 회전하도록 설계된 CSS3 애니메이션 규칙이 있지만 Safari에서는 이 애니메이션을 인식하지 못합니다. 화면 크기를 조정하려고 하면 DOM 내에 요소가 있음이 드러납니다. 이는 문제를 일으키는 DOM 구조가 아님을 나타냅니다.

Safari의 키프레임 관련 동작

Safari에서는 키프레임을 정의할 때 전체 백분율 값을 사용해야 한다는 것이 발견되었습니다. 다른 브라우저에서는 "5%" 또는 "10%"와 같이 축약된 백분율 값을 사용할 수 있습니다. 그러나 Safari에서는 이 맥락에서 "5%" 및 "100%"를 명시적으로 사용해야 합니다.

해결책: 전체 백분율 값 추가

원본을 수정하여 전체 백분율 값을 포함하는 CSS 코드를 사용하면 이제 애니메이션이 Safari에서 올바르게 작동할 수 있습니다. 아래의 업데이트된 코드는 이를 보여줍니다.

<br>@-webkit-keyframes keyarm {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

로그인 후 복사

}

Safari 관련 추가 참고사항 4

Safari 4와 같은 이전 버전의 Safari는 "@keyframes" 구문을 모두 지원하지 않는다는 점에 유의하는 것이 중요합니다. 따라서 Safari 4에서는 애니메이션에 공급업체별 접두어를 사용해야 합니다.

위 내용은 내 CSS3 애니메이션이 Safari에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!