Galera preciso de ajuda com CSS3. Estou usando o keyframes/animation para alterar a imagem de várias classes article, no qual estou usando CSS para alterar o background nas seguintes porcentagens 0, 30, 35,65, 70, 100. O problema esta no fato de que a primeira classe chamada milha, esta mudando perfeitamente e eu apenas repliquei o código para as demais classes, a penúltima classe esta alterando porém apenas 2 imagens. Segue o código abaixo
HTML5
<div class="secao">
<section>
<article class="milha"><span class="badge badge-secondary" id="badge1">categoria 1</span></h3></article>
<article class="farol"><span class="badge badge-secondary" id="badge2">categoria 1</span></h3></article>
<article class="roda"><span class="badge badge-secondary" id="badge3">categoria 1</span></h3></article>
<article class="capo"><span class="badge badge-secondary" id="badge4">categoria 1</span></h3></article>
<article class="retrovisor"><span class="badge badge-secondary" id="badge5">categoria 1</span></h3></article>
<article class="porta"><span class="badge badge-secondary" id="badge6">categoria 1</span></h3></article>
</section>
</div>
Abaixo segue o CSS3 utilizado para alterar estas classes.
.milha{
background-image: url(b2.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation: slide 5s infinite;
animation: slide 5s infinite;
animation-fill-mode: forwards;
}
.farol{
background-image:url(e2.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation:farol 5s infinite;
animation:farol 5s infinite;
}
.roda{
background-image:url(e7.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation: slidesRoda 5s infinite;
animation:roda 5s infinite;
}
.capo{
background-image:url(e5.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation: capo 5s infinite;
animation:capo 5s infinite;
}
.porta{
background-image:url(d1.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation:porta 5s infinite;
animation:porta 5s infinite;
}
.retrovisor{
background-image:url(a1.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
border-radius:12px;
-webkit-animation:retrovisor 5s infinite;
animation:retrovisor 5s infinite;
}
@keyframes farol{
0%, 30%{
background-image: url(e2.jpg);
}
35%, 65%{
background-image: url(e3.jpg);
}
70%, 100%{
background-image: url(e4.jpg);
}
}
@-webkit-keyframes farol{
0%, 30%{
background-image: url(e2.jpg);
}
35%, 65%{
background-image: url(e3.jpg);
}
70%, 100%{
background-image: url(e4.jpg);
}
}
@keyframes roda{
0%, 30%{
background-image: url(e7.jpg);
}
35%, 65%{
background-image: url(e8.jpg);
}
70%, 100%{
background-image: url(e9.jpg);
}
}
@-webkit-keyframes roda{
0%, 30%{
background-image: url(e7.jpg);
}
35%, 65%{
background-image: url(e8.jpg);
}
70%, 100%{
background-image: url(e9.jpg);
}
}
@keyframes capo{
0%, 30%{
background-image: url(e5.jpg);
}
35%, 65%{
background-image: url(e6.jpg);
}
70%, 100%{
background-image: url(e10.jpg);
}
}
@-webkit-keyframes capo{
0%, 30%{
background-image: url(e5.jpg);
}
35%, 65%{
background-image: url(e6.jpg);
}
70%, 100%{
background-image: url(e10.jpg);
}
}
@keyframes porta{
0%, 30%{
background-image: url(d1.jpg);
}
35%, 65%{
background-image: url(d2.jpg);
}
70%, 100%{
background-image: url(d3.jpg);
}
}
@-webkit-keyframes porta{
0%, 30%{
background-image: url(d1.jpg);
}
35%, 65%{
background-image: url(d2.jpg);
}
70%, 100%{
background-image: url(d3.jpg);
}
}
@keyframes retrovisor{
0%, 30%{
background-image: url(a1.jpg);
}
35%, 65%{
background-image: url(a2.jpg);
}
70%, 100%{
background-image: url(a3.jpg);
}
}
@-webkit-keyframes retrovisor{
0%, 30%{
background-image: url(a1.jpg);
}
35%, 65%{
background-image: url(a2.jpg);
}
70%, 100%{
background-image: url(a3.jpg);
}
}
@keyframes slide{
0%, 30%{
background-image: url(b1.jpg);
}
35%, 65%{
background-image: url(b2.jpg);
}
70%, 100%{
background-image: url(b3.jpg);
}
}
@-webkit-keyframes slide{
0%, 30%{
background-image: url(b1.jpg);
}
35%, 65%{
background-image: url(b2.jpg);
}
70%, 100%{
background-image: url(b3.jpg);
}
}
Vale lembrar que todas as imagens que estão contidas nos códigos estão na mesma pasta.
<H3>
no html vc só fechou, mas não abriu..."badge badge-secondary"
, avalie isso. Mas veja abaixo o código funcionando.