CSS 동영상은 Google 크롬에서는 작동하지 않지만 다른 브라우저에서는 작동합니다.

이 예인 http://codepen.io/jezen/pen/CAHsk을 보면 Chrome (v29) 및 다른 최신 브라우저에서 실행되는 애니메이션을 볼 수 있습니다. 정확한 CSS 코드를 가져 와서 로컬 드라이브에 저장하고 CSS 파일을 참조하는 아주 간단한 HTML 페이지를 만들었습니다. 페이지가로드되고 CSS 스타일이 적용되지만 내 로컬 버전에서는 애니메이션이 실행되지 않습니다.CSS 동영상은 Google 크롬에서는 작동하지 않지만 다른 브라우저에서는 작동합니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Arcs</title> 
    <link rel="stylesheet" type="text/css" href="arcs.css"> 
</head> 
<body> 
<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 
</body> 
</html>

내가 참조하고있어 arcs.css 파일은 제가 위에서 연결 한 원본 사이트에서 정확한 복사/붙여 넣기입니다 :

HTML 파일

이만큼 간단합니다.

흥미로운 정보가 하나 있습니다. 동일한 데모 사이트 (http://jezenthomas.com/experiments/arcify/)로 이동하면 애니메이션이 제대로 실행됩니다. 그러나 예제에서 "HAML" "JS"또는 "CSS"탭을 클릭 한 다음 "결과"탭으로 돌아 가면 애니메이션이 더 이상 실행되지 않음을 알 수 있습니다.

출처

2013-09-24 sixside

당신은'-webkit-'접두사를 사용하고 있지 않습니다. 예를 들어'animation' 속성을 설정하는 대신'-webkit-animation'을 설정해야합니다 (더 많은 브라우저에 다른 접두사를 사용해야합니다). 다른 브라우저에서 필요로하는 접두사는 다음과 같습니다. http://caniuse.com/#search=css3%20animation – Itay

CSS에 애니메이션 및 변환 태그에 -webkit- 접두어를 추가해야합니다. 현재 MS IE10 및 FF는 접두어가 붙지 않은 변환을 지원합니다. 행운을 빌어 요 어떻게되는지 알려주세요! :)

출처

2013-09-24 03:03:17

CSS 동영상은 Google 크롬에서는 작동하지 않지만 다른 브라우저에서는 작동합니다.

답변

관련 문제