auto zoom in n out CSS (apple-like slideshow effect)

Question

I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/ for banner images such as the very top one. I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.

here is my html :

 <div class="row">  
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <a href="#">
             <article class="article_container">
                 <img class="article_image_hompage5" src="#">       
                 <h2 class="article_title_hompage3"> a favourite thai soup</h2>     
             </article>
         </a>
     </div>
 </div>

and my css for the image :

.article_image_hompage5{
    width: 100%;
    border-radius: 2px 2px 2px 2px;
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    z-index:0;
}

Can someone help with with finding the right css settings ? cheers,

Answer 1

Use css animation you can get the similar result.

/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}

/* Standard syntax */
@keyframes zoom {
   from {
        transform: scale(1,1);
   }
   to {
        transform: scale(1.5,1.5);
   }
}


img {
    -webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
    animation: zoom 50s;
}

<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />

Answer 2

If you want to also zoom out you need to define the the milestones in your keyframes as such:

@-webkit-keyframes zoominout {
    0% {
        -webkit-transform: scale(1,1);
    }
    50% {
        -webkit-transform: scale(1.5,1.5);
    }
    100% {
        -webkit-transform: scale(1.1,1.1);
    }
}