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.

<div class="bannerContainer">
    <div class="firstBanner animationDetails">
                        
        <span class="biggerText">Header</span><br/>
        <span class="smallerText">Body</span>
    
    </div>
    
    <div class="secondBanner animationDetails">
        
        <span class="biggerText">Header</span><br/>
        <span class="smallerText">Body</span>
    
    </div>
    
    <div class="thirdBanner animationDetails">
        
        <span class="biggerText">Header</span><br/>
        <span class="smallerText">Body</span>
    
    </div>

</div>

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.