Slides in HTML5 / CSS3 - Background does not change

Question

Slides in HTML5 / CSS3 - Background does not change

Navigation

#1 by (1 votes)

2

Need help with CSS3. I am using keyframes / animation to change the image of several article classes, in which I am using CSS to change the background in the following percentages 0, 30, 35, 65, 70, 100. The problem is in the fact that the first class call mile, is changing perfectly and I just replicated the code for the other classes, the penultimate class is changing however only 2 images. Follow the code below

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>

Below is the CSS3 used to change these 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);
    }
}

Remember that all images that are contained in the codes are in the same folder.

html html5 css css3

asked by anonymous 24.01.2018 / 08:00

1 answer

How to add values by category? align icons horizontally

score 1 · Accepted Answer

I am posting the answer just to see that it works perfectly by changing 3 images per element. I only gave a small one in the CSS for easier reading.

Look at the code below and compare it with your , if the folders of the images are ok and you already checked the file extension as I suggested in the comment sometimes this code can help you.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
article {
    display: inline-block;
    color: red;
}

.milha,
.farol,
.roda,
.capo,
.porta,
.retrovisor {
    width: 100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:12px;
}
.milha{
    background-image: url(http://placeskull.com/100/100);
    -webkit-animation: slide 5s infinite;
    animation: slide 5s infinite;
}
.farol{
    background-image: url(http://placecage.com/100/100);
    -webkit-animation: farol 5s infinite;
    animation: slide 5s infinite;
}
.roda{
    background-image: url(http://fillmurray.com/100/100);
    -webkit-animation: roda 5s infinite;
    animation: roda 5s infinite;
}
.capo{
    background-image: url(http://placeskull.com/100/100);
    -webkit-animation: capo 5s infinite;
    animation: capo 5s infinite;
}
.porta{
    background-image: url(http://placecage.com/100/100);
    -webkit-animation: porta 5s infinite;
    animation: porta 5s infinite;
}
.retrovisor{
    background-image: url(http://fillmurray.com/100/100);
    -webkit-animation: retrovisor 5s infinite;
    animation: retrovisor 5s infinite;
}


@keyframes farol{
    
    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}

@-webkit-keyframes farol{

    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}

@keyframes roda{

    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
    
}

@-webkit-keyframes roda{
    
    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
}


@keyframes capo{

    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}

@-webkit-keyframes capo{

    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}

@keyframes porta{

    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
}

@-webkit-keyframes porta{

    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
    
}

@keyframes retrovisor{

    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}

@-webkit-keyframes retrovisor{

    0%, 30%{
    background-image: url(http://fillmurray.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://placeskull.com/100/100);
    }
}


@keyframes slide{
    
    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
}

@-webkit-keyframes slide{
    
    0%, 30%{
    background-image: url(http://placeskull.com/100/100);
    }
    35%, 65%{
    background-image: url(http://placecage.com/100/100);
    }
    70%, 100%{
    background-image: url(http://fillmurray.com/100/100);
    }
}

<div class="secao">
    <section>    
        <article class="milha"><span class="badge badge-secondary" id="badge1"><h3>categoria 1</h3></span></article>
        <article class="farol"><span class="badge badge-secondary" id="badge2"><h3>categoria 2</h3></span></article>
        <article class="roda"><span class="badge badge-secondary" id="badge3"><h3>categoria 3</h3></span></article>
        <article class="capo"><span class="badge badge-secondary" id="badge4"><h3>categoria 4</h3></span></article>
        <article class="retrovisor"><span class="badge badge-secondary" id="badge5"><h3>categoria 5</h3></span></article>
        <article class="porta"><span class="badge badge-secondary" id="badge6"><h3>categoria 6</h3></span></article>
    </section>
</div>