CSS 사파리 브라우저에서 CSS 애니메이션이 작동하지 않습니다.

Question

CSS 나 CSS 애니메이션에 익숙하지 않습니다. 일부 사진의 경우 페이드 인 애니메이션을 만들었습니다. 그들은 잘 작동하지만 이전 Safari 브라우저에서는 작동하지 않습니다.

내 친구가 Safari 5.1.10을 사용하고 사진이 표시되지 않습니다.

애니메이션을 재생할 수있는 것은 무엇입니까 또는 브라우저에 "그 물건에 너무 오래되면 그냥 애니메이션을 무시하고 사진을 표시 할 수 있습니까?"라고 어떻게 말할 수 있습니까? 당신은 그들이 '실험'으로 간주하고 있기 때문에 이전 버전의 애니메이션 속성에 벤더 접두사를 추가 할 필요가 있기 때문입니다

.column-image > div picture > img{ 
    opacity: 0; 
    animation-name: fadein; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
} 

#c1163 > div > div:nth-child(2) > div picture > img{ 
    animation-delay: 0.5s; 
} 

#c1163 > div > div:nth-child(6) > div picture > img{ 
    animation-delay: 1s; 
} 

#c1163 > div > div:nth-child(7) > div picture > img{ 
    animation-delay: 1.5s; 
} 


#c1163 > div > div:nth-child(11) > div picture > img{ 
    animation-delay: 2s; 
} 


#c1163 > div > div:nth-child(12) > div picture > img{ 
    animation-delay: 2.5s; 
} 

@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-o-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

Answer 1

: 여기

그리고

는 CSS입니다. 사용 가능한지 확인하려면 support for Animations을 확인하십시오. Safari 5.1에는 -webkit- 접두사가 필요합니다. 다음과 같이 변경하면

당신의 코드가 작동합니다 :

.column-image > div picture > img{ 
    opacity: 0; 
    animation-name: fadein; 
    animation-duration: 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
    -webkit-animation-name: fadein; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-fill-mode: forwards; 
} 

#c1163 > div > div:nth-child(2) > div picture > img{ 
    animation-delay: 0.5s; 
    -webkit-animation-delay: 0.5s; 
} 

#c1163 > div > div:nth-child(6) > div picture > img{ 
    animation-delay: 1s; 
    -webkit-animation-delay: 1s; 
} 

#c1163 > div > div:nth-child(7) > div picture > img{ 
    animation-delay: 1.5s; 
    -webkit-animation-delay: 1.5s; 
} 


#c1163 > div > div:nth-child(11) > div picture > img{ 
    animation-delay: 2s; 
    -webkit-animation-delay: 2s; 
} 


#c1163 > div > div:nth-child(12) > div picture > img{ 
    animation-delay: 2.5s; 
    -webkit-animation-delay: 2.5s; 
} 

@keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-o-keyframes fadein { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

opacity 속성은 괜찮 꽤 좋은 지원을 가지고 있으며, 그 추가 할 접두사가 없습니다. 이미 다른 브라우저 용 다른 접두어가 있지만 애니메이션 용 웹킷 접두사 만 있으면됩니다 (접두사가 인 키 프레임 접두사는 임).