HTML5/CSS3 slides - Background does not change

Asked

Viewed 122 times

2

Guys need help with CSS3. I’m using keyframes/Animation to change the image of several article classes, where I’m 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 called mile, is changing perfectly and I just replicated the code for the other classes, the penultimate class is changing but 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 follows 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 the images that are contained in the codes are in the same folder.

html css html5 css3 animation

  • Publio u said that all images are in the same correct folder. Then make sure they all have the extension .JPG or if you have any images .GIF or .PNG. I tested here and worked normal with my images if you want I put my code. NOTE: the tag <H3> html you just closed, but did not open...

  • really had one or the other image with wrong format, however this has changed absolutely nothing in the functioning of the slides, strange...

  • Young man, I posted an answer with the code working, see if it matches yours. I noticed you have some class names that are not in the CSS you posted in the question "badge badge-secondary", evaluate this. But see below the code working.

1 answer

1


I am putting the answer just so you see that it is working well exchanging 3 images per element. I just cut back on the CSS for easy reading.

Look at the code below working and compare with your, if the image folders are ok and you have already checked the file extension as I suggested in the comment the times 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>

  • Thanks! I copied and pasted the links of the images you used to test, I saw that the code was functional, hard to believe because I checked several times the images and changed the formats, but now I know how to solve, thank you very guy!

  • Who good it worked out young! Good luck with the project, qq doubt we are here!

Browser other questions tagged html css html5 css3 animation

You are not signed in. Login or sign up in order to post.