CSS3 Scale Animation

for http://stackoverflow.com/questions/17767759/css3-scale-animation-keyframes

by Sebastian Kay

HTML

<div id="treeLeaves"></div>
<div class="leaves"></div>

CSS

#treeLeaves, .leaves {
    background: url(http://s20.postimg.org/g5k7j78ml/leaves.png);
    background-repeat:no-repeat;
    width:375px;
    height:375px;
    z-index:5;
    position:absolute;

    
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    
    
    -webkit-animation: leaves 0.5s ease-in-out infinite alternate;
    animation: leaves 0.5s ease-in-out infinite alternate;
}
.leaves {
  width: 200px;
  height: 200px;
  background-color:#ccc;
}
@-webkit-keyframes leaves {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}

@keyframes leaves {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}