간단한 CSS3 키 프레임 애니메이션이 Firefox에서 작동하지 않습니다.

요소의 bg 이미지를 전환하는 간단한 CSS3 키 프레임 애니메이션을 만들었습니다. 완벽하게 작동하지만 신뢰할 수있는 Firefox가 실패했습니다. 처음에는 접두어를 사용하지 않고 있었지만 문제가 될 수 있다고 생각했습니다. 그 후에 모든 접두사를 손으로 썼습니다. 아직 Firefox에서는 아무것도 사용하지 않았습니다. 트럭이 ON과 OFF 조명을 전환해야합니다, 여기에 관련 코드입니다, 또한 http://madebym.me/test/nimbus/index.html 간단한 CSS3 키 프레임 애니메이션이 Firefox에서 작동하지 않습니다.

당신은에서 예를 볼 수 있습니다.

-webkit-animation: switch-truck-lights 1s linear infinite normal; 
-moz-animation: switch-truck-lights 1s linear infinite normal; 
-ms-animation: switch-truck-lights 1s linear infinite normal; 
-o-animation: switch-truck-lights 1s linear infinite normal; 
animation: switch-truck-lights 1s linear infinite normal; 
} 

@keyframes "switch-truck-lights" { 
from { 
    background-image: url(../images/truck-off.png); 
} 

to { 
    background-image: url(../images/truck-on.png); 
} 
} 

@-moz-keyframes switch-truck-lights { 
    from { 
     background-image: url(../images/truck-off.png); 
    } 

    to { 
     background-image: url(../images/truck-on.png); 
    }; 
} 

@-webkit-keyframes "switch-truck-lights" { 
    from { 
     background-image: url(../images/truck-off.png); 
    } 

    to { 
     background-image: url(../images/truck-on.png); 
    }; 
} 

@-ms-keyframes "switch-truck-lights" { 
    from { 
     background-image: url(../images/truck-off.png); 
    } 

    to { 
     background-image: url(../images/truck-on.png); 
    }; 
} 

@-o-keyframes "switch-truck-lights" { 
    from { 
     background-image: url(../images/truck-off.png); 
    } 

    to { 
     background-image: url(../images/truck-on.png); 
    }; 
}

출처

2013-07-25 suludi

또한 IE10 및 Safari의 Windows에서 오류가 발생합니다. 스프라이트를 만든 다음 bg 위치에 애니메이션을 적용 할 수는 있지만 이것이 다른 브라우저에서는 작동하지 않는 이유가 궁금합니다. 그것은 더 간단하지 않아야합니다. – suludi

간단한 것은 Firefox 브라우저를 업데이트하는 것입니다. 실제로 크롬에서와 마찬가지로 Firefox 22.0에서 사이트가 완벽하게 작동합니다. – WhitehatK

firefox 22와 IE10에서도 작동합니다. –

배경 위치가 valid transition/animation property이 아닌 것으로 보입니다. Chrome에서 작동하는 이유는 절대적으로 배치 된 이미지를 페이드 아웃하거나 이미지 스프라이트의 배경 위치에 애니메이션을 적용하는 것뿐입니다.

나는 무엇을 했는가?

출처

2013-07-26 12:03:29 suludi

간단한 CSS3 키 프레임 애니메이션이 Firefox에서 작동하지 않습니다.

답변

관련 문제