Множественное затухание изображения в CSS – без (java) скрипта
Можно ли перекрещивать 5 изображений в CSS, не используя java-скрипт? Я нашел аналогичный вопрос: css3 image crossfade (без javascript) , однако он имеет только fragment кода CSS; который я пробовал, но не мог заставить его работать. Я новичок в CSS, поэтому не смог связать CSS, упомянутый на приведенной выше странице, с моим следующим HTML:
- Волна (или форма?) С рамкой на CSS3
- Как перекосить элемент, но сохранить текст нормальным (не подверженным курку)
- Полные стили для кросс-браузера.
- Отключение анимации Twitter-загрузки Bootstrap Navbar
- Процент заполнения / маржи на элементе сетки, проигнорированный в Firefox
- В чем разница между переключателями атрибутов pipe (|) и cart (^)?
- Как выбрать всех дочерних элементов элемента, кроме последнего дочернего элемента?
- Каковы различия между гибким основанием и шириной?
- CSS3 Spin Animation
- Как создать многоцветную границу в css3
- Является ли: до псевдоэлемента допустимым на входе ?
- CSS3 Непрерывная анимация вращения (точно так же, как загрузка солнечных часов)
- Как нарисовать трапецию / трапецию с css3?
Это можно легко сделать с помощью 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) и поэтому не будет работать в этих браузерах.