title: CSS animation with transform scale not working in Chrome, Safari and IE but works in FF
body: <p>Despite prefixes, I don't know why transform: scale is not working in Chrome, Safari, IE, but works only in Firefox. 
  Could somebody point out how to fix this issue? Maybe changing width and height in keyframes is better option? </p>
  
  <p>Check this short CSS below line 109:</p>
  
  <pre><code>.icon-elements p.wizjer {
      background: black;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      position: absolute;
      margin-top: 108px;
      margin-left: 109px;
      z-index: 97;
      display: block;
      border: 1px solid gray;
      border-radius: 50%;
   -webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
      box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1);
  
  
      -webkit-animation-name: ap-wizjer;
      -moz-animation-name: ap-wizjer;
      -ms-animation-name: ap-wizjer;
      animation-name: ap-wizjer;
      animation-duration: 7s;
  
      -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
  }
  
  
      @-webkit-keyframes ap-wizjer {
  
          0% {
  
              -webkit-transform: scale(1, 1);
  
              transform: scale(1, 1);
  
          }
  
          50% {
  
              -webkit-transform: scale(1.3, 1.3);
  
              transform: scale(1.3, 1.3);
  
          }
  
          100% {
  
              -webkit-transform: scale(1, 1);
  
              transform: scale(1, 1);
  
          }
  
      }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mechanicznapomarancz/Rkxy2/" rel="nofollow">jsFiddle</a></p>
  
  <p>Thx. </p>