Множественное затухание изображения в CSS – без (java) скрипта

Можно ли перекрещивать 5 изображений в CSS, не используя java-скрипт? Я нашел аналогичный вопрос: css3 image crossfade (без javascript) , однако он имеет только fragment кода CSS; который я пробовал, но не мог заставить его работать. Я новичок в CSS, поэтому не смог связать CSS, упомянутый на приведенной выше странице, с моим следующим HTML:

png png png png png

Это можно легко сделать с помощью CSS3, если вы знаете, сколько у вас изображений.

jsFiddle: http://jsfiddle.net/hajmd/

 #crossfade > img { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 30s linear infinite 0s; -moz-animation: imageAnimation 30s linear infinite 0s; -o-animation: imageAnimation 30s linear infinite 0s; -ms-animation: imageAnimation 30s linear infinite 0s; animation: imageAnimation 30s linear infinite 0s; } 

«30s» в « -webkit-animation: imageAnimation 30s linear infin 0s; » говорит, что анимация для каждого изображения будет длиться 30 секунд бесконечным числом раз.

 #crossfade > img:nth-child(2) { background-image: url(../images/2.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } #crossfade > img:nth-child(3) { background-image: url(../images/3.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } #crossfade > img:nth-child(4) { background-image: url(../images/4.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } #crossfade > img:nth-child(5) { background-image: url(../images/5.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } 

Пример, на который вы ссылаетесь, должен работать для вас в примере, на который вы ссылались. Однако учтите, что CSS3 не поддерживается во всех браузерах (таких как IE8 и IE7) и поэтому не будет работать в этих браузерах.

  • Текст в контейнере flex не переносится в IE11
  • Линейный gradleиент CSS3
  • CSS-переполнение текста: эллипсис; не работает?
  • Как импортировать веб-шрифт Google в файл CSS?
  • Почему размер windows меньше ширины видового экрана, заданного в медиа-запросах
  • Встроенные стили и classы
  • Использование атрибута данных HTML для установки URL-адреса фонового изображения CSS
  • Вращение или поворот изображения при наведении
  • Сделайте div div двумя строками в сетке
  • Непрозрачность границ CSS3?
  • Как я могу избежать перекрытия медиа-запросов?
  • Давайте будем гением компьютера.