CSS3 Scale Animation

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

by Osama Qassar

HTML

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

CSS

#treeLeaves {
    background: url(http://lorempixel.com/400/200/nature/);
    background-repeat:no-repeat;
    width:375px;
    height:375px;
    background:red;
    z-index:5;
    position:absolute;
    transform-origin: 0 0;
    animation: leaves 5s ease-in-out infinite alternate;
}

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