CSS 3 анимации не работают ни в одном браузере

Это простой сайт для школьного проекта. У меня возникли проблемы с анимацией CSS для слайдера изображения на главной странице. Он отказывается от анимации, и проверка с помощью инспекторов веб-сайта браузера показывает, что правило не «вычисляется» (применяется?) К изображению.CSS 3 анимации не работают ни в одном браузере

Вот код страницы:

<!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:

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; 
    } 
    }

Я побежал через весь CSS и HTML файла через W3s CSS и HTML валидатор, но не кости , Они не показывают никаких ошибок. Может кто-нибудь помочь с этим?

источник

2014-02-14 asu74

Вам необходимо добавить -webkit-анимацию, чтобы она работала на хромированном и сафари.

источник

2014-02-14 12:10:57 Lusse

Вам нужны браузер конкретных префиксы:

/*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;

Вы можете использовать такой инструмент, как компас (http://compass-style.org/), который записывает все эти специфические для каждого поставщика правила CSS автоматически, вы просто пишете:

@include transition();

Также , это не будет работать в любом браузере на земле, см. таблицу caniuse: http://caniuse.com/#search=animation

источник

2014-02-14 12:11:27

Brilliant! Поэтому эти префиксы, специфичные для поставщика, должны применяться к каждому свойству анимации, например. -o-animation-play-state, -moz-animation-play-state, так далее и т. д.? – asu74

Да, exaccty. Для большинства вещей 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 анимации не работают ни в одном браузере

ответ

Смежные вопросы