CSS слайдер изображения не скользит

Question

Я создаю слайдер изображения, содержащий 5 изображений, которые отображаются в верхней части моей веб-страницы. Первое изображение появляется, когда я тестирую его в Интернете. Но это не оживление. Кто может помочь мне :)

Это мой HTML:

<div id="slider"> 
     <figure> 
      <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> 
      <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt=""> 
      <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt=""> 
      <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt=""> 
      <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> 
     </figure> 
</div> 

И это мой CSS:

div#slider { 
display: block; 
position: relative; 
overflow: hidden; 
-webkit-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.75); 
-moz-box-shadow: 0px 2px 4px 0px rgba(50, 50, 50, 0.75); 
box-shadow:   0px 2px 4px 0px rgba(50, 50, 50, 0.75);} 


div#slider figure img { 
    width: 20%; 
} 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    font-size: 0; 
    -webkit-animation: 30s slidy infinite; 
    -moz-animation: 30s slidy infinite; 
    animation: 30s slidy infinite; 
} 



div#slider .title{ 
    z-index:100; 
    position:absolute;  
    color:white; 
    font-size: 11pt; 
    bottom: 0; 
    margin-left: 5%; 
    width: 90%; 
} 

@keyframes slidy { 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 

Почему изображения не скользит влево? Я хочу, чтобы он работал на устройствах iOS и Android.

Answer 1

Код верный, но @keyframes не работает во всех браузерах, поэтому я добавил -webkit-ключевые кадры, и он работает для меня.

@-webkit-keyframes slidy /* Safari and Chrome */ 
{ 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

Вот демо: http://jsfiddle.net/RX3jN/

Answer 2

Вам не хватает всего javascript, который обрабатывает эффекты и переходы. Я предлагаю вам немного почитать об этом на таких сайтах, как http://wowslider.com/index.html#overview

В общих чертах вы определяете HTML и CSS, а также некоторый JS (необходим javascript для его работы), вы можете использовать существующую структуру (группа функций, облегчающих задачу) или делать это вручную (записывая все необходимые коды).