Я пытаюсь создать галерею нескольких изображений, которая автоматически переключает и автоматически выводит изображения In и Out. Я пытаюсь сделать это только с помощью CSS, но это не сработает.
Вот HTML
<div id="cf4a">
<img src="img/1a.jpg"/>
<img src="img/2a.jpg"/>
<img src="img/3a.jpg" />
<img src="img/4a.jpg"/>
</div>
И вот CSS
@keyframes cf4aFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
top:200px;
right:0;
left:0;
bottom:0;
background:red;
height:280px;
width:100%;
margin:auto;
}
#cf4a img {
position:absolute;
width:100%;
height:280px;
left:0;
animation-name: cf4aFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#cf4a img:nth-of-type(1) {
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
animation-delay: 0;
}
Он не переключится! Я новичок в HTML и CSS, поэтому я использовал это руководство: http://css3.bradshawenterprises.com/cfimg/
Заранее спасибо :)
PS Я знаю, что вы можете сделать это с помощью jQuery, но я бы предпочел использовать CSS.
Имя класса @keyframes cf4FadeInOut неверно в соответствии с вашим кодом.
Должно быть вместо "@keyframes cf4aFadeInOut"?