내 사이트에서 Chrome에서 CSS3 애니메이션이 실행되지 않습니다.

Question

CSS3로 SVG에 애니메이션을 적용하려고합니다. 이 코드를 실행하지 않습니다, 나는 내 사이트에 코드를 구현하지만 때, 그러나이 예제는 크롬에서 정상적으로 정확히 작동

http://codepen.io/MyXoToD/pen/vBlfs

- 당신은 여기에서 예를 볼 수 있습니다. 그러나 그것은 Firefox에서 완벽하게 작동합니다. Chrome에서 요소를 검사하면 애니메이션 속성을 통해 선이 표시되고 '속성 값이 잘못되었습니다.'라는 오류가 표시됩니다. 그러나 예를 볼 때 나는 똑같은 일을하고 나는 같은 오류를 얻지 못한다.

저는 약간 혼란스럽고 잠시 동안 디버깅을 해왔습니다. Chrome 버전 (버전 39.0.2171.95 m)이 될 수 없습니다. 당신은 Codepen에 -prefix없는 모드를 설정 한

img { 
    max-width: 80%; 
    width: 100%; 
    //position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    opacity: 0; 
    animation-name: show; 
    animation-delay: 6s; 
    animation-duration: 1s; 
    animation-fill-mode: forwards; 
    animation-iteration-count: 1; 
    animation-timing-function: linear; 
} 

svg { 
    max-width: 80%; 
    width: 100%; 
    //position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    path { 
    stroke-width: 2; 
    stroke: black; 
    animation-fill-mode: forwards; 
    animation-iteration-count: 1; 
    animation-name: draw; 
    animation-timing-function: linear; 
    animation-duration: 3s; 
    &.bird { 
     stroke: black; 
     stroke-dasharray: 2810; 
     stroke-dashoffset: 2810; 

    } 

    } 
} 


} 

@keyframes draw { 
    to { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes show { 
    to { 
    opacity: 1; 
    } 
} 

Answer 1

: 내 코드는 거의 정확하게 몇 가지 작은 수정 후 동일하지만

, 여기에 내 코드 조각입니다. 그것은 고정되지 않은 CSS 속성 만 사방에 사용할 수 있습니다. 이 코드는 필요한 경우에만 CSS 코드에 현재 브라우저의 접두어를 추가하여 배후에서 작동합니다.

예를 들어, Codepen에 당신은 볼 수 있습니다 :

animation-name: show; 

대신 :

animation-name: show; 
-webkit-animation-name: show; 
-moz-animation-name: show;