title: CSS animation not working in mac
body: <p>I am with problem in mac/safari, 2 css animation not working in refresh screen.</p>
  
  <ul>
  <li>div should do right scroll left.</li>
  <li>image resize.</li>
  </ul>
  
  <p>To scroll I am using:</p>
  
  <pre><code>.overlay {
    background-color: #fff;
    opacity: 0.83;
    -webkit-transition: right .5s ease;
    -moz-transition: right .5s ease;
    -o-transition: right .5s ease;
    -ms-transition: right .5s ease;
    transition: right .5s ease;
    position: relative;
  }
  </code></pre>
  
  <p>And for image resize:</p>
  
  <pre><code>.resize {
    animation: animationIncrease .5s infinite alternate;
    -webkit-animation: animationIncreaseMac .5s infinite alternate;
    -moz-animation: animationIncrease .5s infinite alternate;
    -o-animation: animationIncrease .5s infinite alternate;
    -ms-animation: animationIncrease .5s infinite alternate;
  }
  
  @keyframes animationIncrease {
    0% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(1.3);
    }
  }
  </code></pre>
  
  <p>In Chrome/Firefox/Ie it's right. Only in Mac/Safari not working... if I stop click, it's right. Suggestions?</p>
  
  <p><a href="https://jsfiddle.net/z6r9oakw/" rel="nofollow">https://jsfiddle.net/z6r9oakw/</a></p>