title: CSS animation not loaded after refresh
body: <p>I'm facing some weird issue. I added css animation on some element in the page, when I open it on iOs the animation is running but if I refresh the page the animation is not running anymore. That's happens only on iOs(safari and chrome).</p>
  
  <p>I tried to add animation-delay but it didn't help. The animation is set on some icon. This icon should animate on 'after' element.</p>
  
  <pre><code>  .icon {
      content: "";
      display: block;
      width: 18px;
      height: 18px;
      background-image: url('images/banners/bus-icon-banner-1.svg');
      background-size: cover;
      position: absolute;
      transform: translate3d(60px, 64px, 0);
      top: 0;
      html[dir=ltr] &amp; {
      left: -148px;
      }
  
      animation: orange-line-ani 5s cubic-bezier(0.1, 0.01, 0.15, 0.05) 2s infinite;
      @include keyframes(orange-line-ani) {
        0% {
          transform: translate3d(57px, 64px, 0);
        }
        30% {
          transform: translate3d(63px, 28px,0);
        }
        70% {
          transform: translate3d(86px, 28px,0);
        }
        100% {
          transform: translate3d(89px, -6px,0);
        }
      }
    }
  </code></pre>
  
  <p>Any help?</p>