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

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

CSS3를 지원하는 모든 브라우저에서 CSS3를 사용하는 애니메이션과 관련하여 몇 가지 문제가 발생했습니다. 완벽하게 실행됩니다. Safari를 제외한 모든 장치. 애니메이션 코드는 다음과 같습니다.

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    /* ... other styles ... */
}
.landing .board .right .key-arm {
    /* ... other styles ... */
}

/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    /* ... other keyframes ... */
}

@-ms-keyframes keyarm {
    /* ... other keyframes ... */
}

@-o-keyframes keyarm {
    /* ... other keyframes ... */
}

@keyframes keyarm{
    /* ... other keyframes ... */
}

.right .key-arm{
    /* ... other styles ... */
    -webkit-animation: keyarm 8s ease-in-out 0s infinite;
    -moz-animation: keyarm 8s ease-in-out 4s infinite;
    -ms-animation: keyarm 8s ease-in-out 4s infinite;
    -o-animation: keyarm 8s ease-in-out 4s infinite;
    animation: keyarm 8s ease-in-out 0s infinite;
}

말씀하신 대로 Safari에서는 작동하지 않으며 애니메이션에서는 아무 일도 일어나지 않습니다. 또한 Safari에서만 화면 크기를 조정할 때만 "key-arm" div가 표시됩니다! DOM에 존재하지만 어떤 이유로 표시되지 않습니다!

뭐 잘못했어요?

답변

문제는 @keyframes에 있습니다. Safari 4에서는 @keyframes가 지원되지 않습니다. 같은 페이지에서 @keyframes를 사용하여 유효한 애니메이션을 만들 수 있기 때문에 이것은 이상합니다!

@keyframes를 지원하는 애니메이션 코드:

CSS

.board .rays{
    /* ... other styles ... */
}

.board .bottle{
    /* ... other styles ... */
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    /* ... other keyframes ... */
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

HTML

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

Safari 4를 사용하는 경우 매체(예: jsFiddle)에서 시도해 보면 애니메이션이 작동하지 않는다는 것을 알게 될 것입니다.

해결책

해결책을 찾았습니다. Safari에서 키프레임을 사용할 때는 전체 백분율을 사용해야 합니다.

이 방법은 작동하지 않습니다.

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

이 방법은 다음과 같습니다.

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

이유는 잘 모르겠습니다. 하지만 그것이 Safari가 작동하는 방식입니다!

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