title: CSS3 Scale Animation Keyframes
body: <p>having a few issues using css3 animation scale, opacity and other things work but cant seem to get scale to work. </p>
  
  <p>snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #treeLeaves {
          background: url(https://i.pinimg.com/originals/72/c0/8e/72c08eefa235ae1c8aa72caa71eeba39.jpg);
          background-repeat:no-repeat;
          width:100%;
          height:375px;
          z-index:5;
          position:absolute;
          bottom:140px;
          left:0px;
      }
  
      @keyframe leaves {
          0% {
              transform: scale(1.0);
              -webkit-transform: scale(1.0);
          }
          100% {
              transform: scale(2.0);
              -webkit-transform: scale(2.0);
          }
      }
  
      #treeLeaves {
          animation: leaves 5s ease-in-out infinite alternate;
          -webkit-animation: leaves 5s ease-in-out infinite alternate;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="treeLeaves"&gt;&lt;/div&gt;
  &lt;div class="leaves"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>basically its 1 img that i wanted to scale up and down constantly over time.
  only using webkit because it only needs to work in chrome.</p>
  
  <p>thanks.</p>