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

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

Safari에서 CSS3 애니메이션이 작동하지 않는 문제가 발생했습니다. CSS3를 지원하는 다른 모든 브라우저에서는 애니메이션이 제대로 작동하지만 Safari에서는 제대로 작동하지 않습니다. 코드는 다음과 같습니다.

HTML

<div>

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}

.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}

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

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

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

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

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

.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

   -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에서 발생하는 문제는 다음과 같습니다.

• 애니메이션이 유효하지 않습니다.
• key-arm div는 화면 크기를 조정할 때만 표시됩니다.

Safari에서는 키프레임을 지원하지만 제한이 있습니다. 키프레임을 선언할 때 전체 백분율을 사용해야 합니다. 예를 들어 다음 코드는 Safari에서 실행되지 않습니다.

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

다음 코드는 Safari에서 실행됩니다.

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -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 중국어 웹사이트의 기타 관련 기사를 참조하세요!