Image Transition 4 images with Animate css3

Asked

Viewed 773 times

1

I’m doing a simple advertising that alternates 4 images in the same div, only my problem is that the duration time between the 4 is not right... it gets one on top of the other in mode "messy", how could I do so that the 4 iamgens get synchronized....

The code is as follows::

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8" />
    <meta name="title" content="#" />
    <meta name="description" content="Free Web tutorials">
    <meta name="author" content="#" />
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>Banner</title>

    <style type="text/css">
        .azul{
            width: 300px;
            height: 250px;

            background-image: url("images/fundo.png");



        }


        .img-3{
            position:absolute;
            animation-name: primeiro;
            animation-duration: 2s;
            animation-iteration-count: 15;
            animation-direction: alternate;
            animation-delay: 0s;

        }

        .img-4{
            position:absolute;

            opacity: 0;


            animation-name: segundo;
            animation-duration: 2s;
            animation-iteration-count: 15;
            animation-direction: alternate;
            animation-delay:4s;

        }


        .img-5{
            position:absolute;

            opacity: 0;


            animation-name: terceiro;
            animation-duration: 2s;
            animation-iteration-count: 15;
            animation-direction: alternate;
            animation-delay:6s;

        }   

            .img-6{
            position:absolute;

            opacity: 0;


            animation-name: quarto;
            animation-duration: 2s;
            animation-iteration-count: 15;
            animation-direction: alternate;
            animation-delay:8s;

        }

        /* Original */
        @keyframes primeiro {
            100%{
                opacity: 0;
            }           
        }

        @keyframes segundo {
            100%{
                opacity: 1;
            }           
        }

        @keyframes terceiro {
            100%{
                opacity: 1;
            }           
        }

        @keyframes quarto {
            100%{
                opacity: 1;
            }           
        }




    </style>
</head>

<body>
    <div class="azul">
        <img src="images/03.png" class="img-3" />
        <img src="images/04.png" class="img-4" />
        <img src="images/05.png" class="img-5" />
        <img src="images/04.png" class="img-6" />
    </div>


</body>

</html>
html5 css3

1 answer

1


#crossfade > img { 
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 16s linear infinite 0s; 
}

#crossfade > img:nth-child(2)  {
    animation-delay: 4s; 
}
#crossfade > img:nth-child(3) {
    animation-delay: 8s; 
}
#crossfade > img:nth-child(4) {
    animation-delay: 12s; 
}
#crossfade > img:nth-child(5) {
    animation-delay: 16s; 
}

@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 }
}
<div id="crossfade">
  <img src="http://i1236.photobucket.com/albums/ff445/brg901/tamsin%20egerton/tegerton400.jpg" alt="Image 1">
  <img src="http://i741.photobucket.com/albums/xx51/Isaac08_2010/400x200.jpg" alt="Image 2">
  <img src="http://i608.photobucket.com/albums/tt163/kaitisydgraphics/Freddie%20Highmore/400x200freddiehighmore1.png" alt="Image 3">
  <img src="http://i1063.photobucket.com/albums/t501/fruityflamingo/Chasidee%20House/2718c343-f3a8-4fc2-afd5-50249294f832_zpsd2cb29b9.jpg" alt="Image 1">
</div>

Browser other questions tagged html5 css3

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