CSS3 Scale Animation

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

by Juan Muñoz

HTML

<div id="treeLeaves"></div>
<input type="button" id=btn value=clic>

CSS

#btn{
  position:absolute;
  right:0;
  z-index:11;
}
#treeLeaves {
    background: url(https://webwaredesign.cl/jota/pato.png);
    background-repeat:no-repeat;
    position:absolute;
    top:0;
    left:0;
    width:105px;
    height:105px;
    z-index:5;
    position:absolute;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 1s ease 0.5s;
  
   
}
.hacerCambios{
  width: 500px; /* Full width */
  -webkit-transform: scale(8.0);
  position: absolute;
  right:0;
}
/* @-webkit-keyframes leaves {
    0% {
        -webkit-transform: scale(1.0);
    }
    50% {
      background-color:red;
    }
    100% {
        -webkit-transform: scale(2.0);
    }
} */

JavaScript

$(document).ready(function (){

	$('#btn').click(function (){
    if($('#treeLeaves').hasClass('hacerCambios')){
      	$('#treeLeaves').removeClass('hacerCambios')
    }else{
      $('#treeLeaves').addClass('hacerCambios')
    }
  })

})