1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to fade in fade out image one after another in sequence - very troublesome

Discussion in 'HTML & Website Design' started by faizzsheikh, Jan 19, 2017.

  1. #1
    Hi All..

    I am badly stuck in this and unable to accomplish.

    On the below link you can see 3 group of images fading in and out. I want to set their transition in a sequence one after another, at first all images will load, then the first image in group one should change after that the image in second group will change then the image in third group should change, then again the first will change then second and then third.

    http://graphixideus.com/slider/
    SEMrush

    Below is the HTML and CSS I am using in case you need it.


    #crossfade > img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 15s linear infinite 0s;
        -moz-animation: imageAnimation 15s linear infinite 0s;
        -o-animation: imageAnimation 15s linear infinite 0s;
        -ms-animation: imageAnimation 15s linear infinite 0s;
        animation: imageAnimation 15s linear infinite 0s;
    }
    
    #crossfade > img:nth-child(2)  {
        -webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        -o-animation-delay: 3s;
        -ms-animation-delay: 3s;
        animation-delay: 3s;
    }
    #crossfade > img:nth-child(3) {
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -o-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
    }
    #crossfade > img:nth-child(4) {
        -webkit-animation-delay: 9s;
        -moz-animation-delay: 9s;
        -o-animation-delay: 9s;
        -ms-animation-delay: 9s;
        animation-delay: 9s;
    }
    #crossfade > img:nth-child(5) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    }
    
    @-webkit-keyframes imageAnimation {
        0% { opacity: 0;
        -webkit-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -webkit-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-moz-keyframes imageAnimation {
        0% { opacity: 0;
        -moz-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -moz-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-o-keyframes imageAnimation {
        0% { opacity: 0;
        -o-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -o-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-ms-keyframes imageAnimation {
        0% { opacity: 0;
        -ms-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -ms-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @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 }
    }
    
    
    
    
    #crossfade1 > img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 20s linear infinite 0s;
        -moz-animation: imageAnimation 20s linear infinite 0s;
        -o-animation: imageAnimation 20s linear infinite 0s;
        -ms-animation: imageAnimation 20s linear infinite 0s;
        animation: imageAnimation 20s linear infinite 0s;
    }
    
    #crossfade1 > img:nth-child(2)  {
        -webkit-animation-delay: 4s;
        -moz-animation-delay: 4s;
        -o-animation-delay: 4s;
        -ms-animation-delay: 4s;
        animation-delay: 4s;
    }
    #crossfade1 > img:nth-child(3) {
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -o-animation-delay: 8s;
        -ms-animation-delay: 8s;
        animation-delay: 8s;
    }
    #crossfade1 > img:nth-child(4) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    }
    #crossfade1 > img:nth-child(5) {
        -webkit-animation-delay: 16s;
        -moz-animation-delay: 16s;
        -o-animation-delay: 16s;
        -ms-animation-delay: 16s;
        animation-delay: 16s;
    }
    
    @-webkit-keyframes imageAnimation {
        0% { opacity: 0;
        -webkit-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -webkit-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-moz-keyframes imageAnimation {
        0% { opacity: 0;
        -moz-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -moz-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-o-keyframes imageAnimation {
        0% { opacity: 0;
        -o-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -o-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-ms-keyframes imageAnimation {
        0% { opacity: 0;
        -ms-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -ms-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @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 }
    }
    
    
    
    
    
    
    #crossfade2 > img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 25s linear infinite 0s;
        -moz-animation: imageAnimation 25s linear infinite 0s;
        -o-animation: imageAnimation 25s linear infinite 0s;
        -ms-animation: imageAnimation 25s linear infinite 0s;
        animation: imageAnimation 25s linear infinite 0s;
    }
    
    #crossfade2 > img:nth-child(2)  {
        -webkit-animation-delay: 5s;
        -moz-animation-delay: 5s;
        -o-animation-delay: 5s;
        -ms-animation-delay: 5s;
        animation-delay: 5s;
    }
    #crossfade2 > img:nth-child(3) {
        -webkit-animation-delay: 10s;
        -moz-animation-delay: 10s;
        -o-animation-delay: 10s;
        -ms-animation-delay: 10s;
        animation-delay: 10s;
    }
    #crossfade2 > img:nth-child(4) {
        -webkit-animation-delay: 15s;
        -moz-animation-delay: 15s;
        -o-animation-delay: 15s;
        -ms-animation-delay: 15s;
        animation-delay: 15s;
    }
    #crossfade2 > img:nth-child(5) {
        -webkit-animation-delay: 20s;
        -moz-animation-delay: 20s;
        -o-animation-delay: 20s;
        -ms-animation-delay: 20s;
        animation-delay: 20s;
    }
    
    @-webkit-keyframes imageAnimation {
        0% { opacity: 0;
        -webkit-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -webkit-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-moz-keyframes imageAnimation {
        0% { opacity: 0;
        -moz-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -moz-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-o-keyframes imageAnimation {
        0% { opacity: 0;
        -o-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -o-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-ms-keyframes imageAnimation {
        0% { opacity: 0;
        -ms-animation-timing-function: ease-in; }
        8% { opacity: 1;
             -ms-animation-timing-function: ease-out; }
        17% { opacity: 1 }
        25% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @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 }
    }
    Code (CSS):
     
    faizzsheikh, Jan 19, 2017 IP
    SEMrush