이 애니메이션이 Safari (iOS 포함)에서 작동하지 않는 이유는 무엇입니까?

Question

나는 무엇을 시도해야할지 모르겠습니다. CSS 유효성 검사기를 통과 시켜도 통과합니다. Chrome 및 Firefox에서 작동합니다. Safari는 내가 알 수있는 경고 나 오류가 없음을 보여줍니다.

관련 CSS :

.lines { 
    width: 32px; 
    margin: 20px auto; 
} 

.line-bar { 
    display: inline-block; 
    background-color: #f7f7f7; 
    width: 4px; 
    height: 18px; 
    border-radius: 4px; 
    -webkit-animation: loading 1s ease-in-out infinite; 
    animation: loading 1s ease-in-out infinite; 
} 

.line-bar:nth-child(1) { 

} 

.line-bar:nth-child(2) { 
    -webkit-animation-delay: 0.09s; 
    animation-delay: 0.09s; 
} 

.line-bar:nth-child(3) { 
    -webkit-animation-delay: 0.18s; 
    animation-delay: 0.18s; 
} 

.line-bar:nth-child(4) { 
    -webkit-animation-delay: 0.27s; 
    animation-delay: 0.27s; 
} 

@-webkit-keyframes loading { 
    0% { 
    transform: scale(1); 
    } 

    20% { 
    transform: scale(1, 2.2); 
    } 

    40% { 
    transform: scale(1); 
    } 
} 

@keyframes loading { 
    0% { 
    transform: scale(1); 
    } 

    20% { 
    transform: scale(1, 2.2); 
    } 

    40% { 
    transform: scale(1); 
    } 
} 

http://jsbin.com/yobatuveji/1

Answer 1

당신이 키 프레임이 -webkit- 접두사에 의해 도입 된 이후 transform 재산

@-webkit-keyframes loading { 
    0% { 
     -webkit-transform: scale(1); 
    } 

    20% { 
     -webkit-transform: scale(1, 2.2); 
    } 

    40% { 
     -webkit-transform: scale(1); 
    } 
} 

을 또한 webkit- 공급 업체 접두사를 사용해야합니다.
이 변경 사항은 Safari에서도 예상대로 실행됩니다 (v.7.1.2/MacOS에서 확인).