Making A Sliding Banner Using HTML And CSS3

Let’s say we need three banners to slide down one by one.
First we need to create the banner container, containing the three banners.

    
                        
        Header

        Body
    
    
    
    
        
        Header

        Body
    
    
    
    
        
        Header

        Body
    
    

Now lets add some styling to it.

.bannerContainer { height: 250px; overflow: hidden; }

.bannerContainer .animationDetails { animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite; animation-delay: 0s; -moz-animation-delay: 0s;
            -webkit-animation-delay: 0s; }

.bannerContainer .firstBanner { height: 130px; margin-top: 120px; background-color: #c3c3c3;  
            animation: slideFirstBanner 20s; -moz-animation: slideFirstBanner 20s; -webkit-animation: slideFirstBanner 20s; }

.bannerContainer .secondBanner { height: 0px; margin-top:0px; background-color: #e3e3e3;  
            animation: slideSecondBanner 20s; -moz-animation: slideSecondBanner 20s; -webkit-animation: slideSecondBanner 20s; }

.bannerContainer .thirdBanner { height: 0px; margin-top: 0px; background-color: #d3d3d3;  
            animation: slideThirdBanner 20s; -moz-animation: slideThirdBanner 20s; -webkit-animation: slideThirdBanner 20s; }

Now we need to animate the sliding effect for the banners.

@keyframes slideFirstBanner
    {
        0% { margin-top: 0px; visibility: visible; height: 0px; }
        7% { margin-top: 120px; visibility: visible; height: 130px;}
        27% { margin-top: 120px; visibility: visible; height: 130px;}
        33%  { margin-top: 250px; visibility: hidden; height: 0px;}
        34%  { margin-top: 0px; visibility: hidden; height: 0px;}
        100%  { margin-top: 0px; visibility: hidden; height: 0px;}
    }
    @keyframes slideSecondBanner
    {
        0% { margin-top: 0px; visibility: hidden; height: 0px; }
        34% { margin-top: 0px; visibility: visible; height: 0px;}
        41% { margin-top: 120px; visibility: visible; height: 130px;}
        61% { margin-top: 120px; visibility: visible; height: 130px;}
        67%  { margin-top: 250px; visibility: hidden; height: 0px;}
        68%  { margin-top: 0px; visibility: hidden; height: 0px;}
        100%  { margin-top: 0px; visibility: hidden; height: 0px;}
    }
    @keyframes slideThirdBanner
    {
        0% { margin-top: 0px; visibility: hidden; height: 0px; }
        68% { margin-top: 0px; visibility: hidden; height: 0px;}
        75% { margin-top: 120px; visibility: visible; height: 130px;}
        95%  { margin-top: 120px; visibility: visible; height: 130px;}
        100%  { margin-top: 250px; visibility: hidden; height: 0px;}
    }

Similary, we need to also add these three animations again for other browsers by using prefixes like -o-, -webkit-, -moz-.

Note : This animation will not work on Internet Explorer.