CSS 3 애니메이션이 모든 브라우저에서 작동하지 않습니다.

이것은 학교 프로젝트를위한 간단한 웹 사이트입니다. 홈 페이지의 이미지 슬라이더에 대한 CSS 애니메이션에 문제가있었습니다. 그것은 애니메이트를 거부하고, 브라우저 웹 사이트 조사관과 함께 검사는 이미지에 규칙이 "계산"(적용되지 않는) 것을 보여줍니다. 여기 CSS 3 애니메이션이 모든 브라우저에서 작동하지 않습니다.

페이지에 대한 코드입니다 :

body 
{ 
    background-image:url("../images/bg.png"); 
} 
@font-face 
{ 
    font-family: Interstate; 
    src:url("../fonts/Interstate.ttf"); 
} 
#wrapper 
{ 
    position:relative; 
    margin:auto; 
    width:900px; 
    background-color:#fcfcfc; 
} 
#wrapper header img 
{ 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 
#navbar 
{ 
    position:fixed; 
} 
#navbar ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 
#navbar li 
{ 
    display:inline; 
    float:left; 
} 
#navbar a 
{ 
    display:block; 
    width:225px; 
    font-family:Interstate, Segoe UI, sans-serif; 
    text-align:center; 
} 
#navbar a:hover 
{ 

} 
#main 
{ 
    margin-left:auto; 
    margin-right:auto; 
    padding:0; 
} 
#main h1 
{ 
    font-family:Interstate, Segoe UI; 
    text-align:center; 
    color:#6f273d; 
} 
#main p 
{ 
    font-family:Interstate, Segoe UI, sans-serif; 
    text-align:justify; 
    margin-left:8px; 
    margin-right:8px; 
} 
#main hr 
{ 
    color:#6f273d; 
    background-color:#6f273d; 
} 
header .slider 
{ 
    overflow:hidden; 
} 
header .slider ul 
{ 
    width:8100px; 
    margin:0; 
    padding:0; 
    position:auto; 
    cursor:arrow; 
    animation: slide 15s; 
    animation-duration:15s; 
    animation-iteration-count:infinite; 
    animation-timing-function:ease-out; 
} 
header .slider ul:hover 
{ 
    animation-play-state:paused; 
} 
header .slider ul li 
{ 
    list-style:none; 
    float:left; 
    margin:0; 
    position:relative 
} 
@keyframes "slide" 
{ 
    0% 
    { 
    left:0; 
    } 
    11% 
    { 
    left:-900px; 
    } 
    22% 
    { 
    left:-1800px; 
    } 
    33% 
    { 
    left:-2700px; 
    } 
    44% 
    { 
    left:-3600px; 
    } 
    55% 
    { 
    left:-4500px; 
    } 
    66% 
    { 
    left:-5400px; 
    } 
    77% 
    { 
    left:-6300px; 
    } 
    88% 
    { 
    left:-7200px; 
    } 
    100% 
    { 
    left:0; 
    } 
    }

내가 W3s의 CSS와 HTML 유효성 검사기를 통해 전체 CSS와 HTML 파일을 통해 실행

,하지만 주사위 :

<!DOCTYPE html> 
<head> 
    <title>Foo Bar Lorem Ipsum IS-3 | Home</title> 
    <link rel="stylesheet" href="stylesheets\home.css"> 
</head> 
<body> 
    <div id="wrapper"> 
    <header> 
    <div id="navbar"> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="about.html">About Us</a></li> 
     <li><a href="events.html">Events</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <img src="images\header.png"> 
    <header> 
    <div class="slider"> 
    <ul> 
     <li><img src="images\law1.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\law2.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\law3.JPG" width="900" height="675" title="SLC Law 

Workshop"/> </li> 
     <li><img src="images\blood1.JPG" width="900" height="675" title="SLC Blood 

Drive "/> </li> 
     <li><img src="images\blood2.JPG" width="900" height="675" title="SLC Blood 

Drive"/> </li> 
     <li><img src="images\blood3.JPG" width="900" height="675" title="SLC Blood 

Drive"/> </li> 
     <li><img src="images\interview1.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
     <li><img src="images\interview3.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
     <li><img src="images\interview4.JPG" width="900" height="675" title="SLC 

Interview"/> </li> 
    </ul> 
    </div> 
    </header> 
    <div id="main"> 
     <h1> 
     Welcome to the Foo Website 
     </h1> 
     <hr /> 
     <p> 
     Welcome to the Foo 
     </p> 
     <p> 
     Lorem Ipsum 
     </p> 
     <p> 
     Hello World 
     </p> 
    </div> 
    </body> 
    </html>

그리고 CSS에 대한 . 오류를 표시하지 않습니다. 아무도 이것으로 도울 수 있습니까?

출처

2014-02-14 asu74

크롬과 사파리에서 작동하려면 -webkit-animation을 추가해야합니다.

출처

2014-02-14 12:10:57 Lusse

당신은 브라우저 특정 접두사가 필요합니다 당신은 나침반 (http://compass-style.org/)와 같은 도구를 사용할 수 있습니다

/*all those who support it*/ 
@keyframes /*....*/ 
animation: slide 15s; 
animation-duration:15s; 
animation-iteration-count:infinite; 
animation-timing-function:ease-out; 

/*Chrome and Safari*/ 
@-webkit-keyframes /*....*/ 
-webkit-animation: slide 15s; 
-webkit-animation-duration:15s; 
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function:ease-out; 

/*Firefox*/ 
@-moz-keyframes /*....*/ 
-moz-animation: slide 15s; 
-moz-animation-duration:15s; 
-moz-animation-iteration-count:infinite; 
-moz-animation-timing-function:ease-out; 

/*Opera*/ 
@-o-keyframes /*....*/ 
-o-animation: slide 15s; 
-o-animation-duration:15s; 
-o-animation-iteration-count:infinite; 
-o-animation-timing-function:ease-out;

자동으로 모든 벤더 고유의 CSS 규칙을 작성, 당신은 단지 쓰기 : 또한

@include transition();

, 지구상의 어떤 브라우저에서도 작동하지 않습니다. 캐 노이 즈 테이블을 참조하십시오 : http://caniuse.com/#search=animation

출처

2014-02-14 12:11:27

브릴리언트! 따라서이 공급 업체별 프리픽스는 모든 애니메이션 속성 (예 : -o-animation-play-state, -moz-animation-play-state, 등등? – asu74

예, exaclty입니다. 대부분의 css3 항목에는 접두사가 필요합니다 (현재로서는 앞으로 변경 될 수 있습니다). –

좋아요, 각 애니메이션 속성에 대한 공급 업체 별 접두사를 추가했지만 애니메이션으로 만들 수는 없습니다. 각 브라우저의 사이트 관리자로 확인하면 이미지 슬라이더에 대한 규칙이 계산되지 않고 계속 표시됩니다. 내가 놓치고 있는게 있니? – asu74

브라우저 접두사를 추가하는 것 외에도 요 애니메이션 이름 주위에 따옴표를 제거해야합니다. Firefox의 최신 버전은 더 이상 -moz-이라는 접두어를 필요로하지 않지만 오랫동안 업데이트하지 않은 사용자를 위해서는 어떤 식 으로든 추가 할 수 있습니다.

@keyframes "slide" 
{ ...

은 다음과 같아야합니다

@keyframes slide 
    { ...

당신은 또한 애니메이션 약식 속성을 사용하여 약간의 시간을 절약 할 수 있습니다.

animation: slide 15s; 
animation-duration:15s; 
animation-iteration-count:infinite; 
animation-timing-function:ease-out;

될 수 있을까 :

animation: slide 15s infinite ease-out;

See the MDN documentation for CSS animations for further information.

출처

2014-02-14 12:39:21 apaul

CSS 3 애니메이션이 모든 브라우저에서 작동하지 않습니다.

답변

관련 문제