title: CSS Animation involving opacity, scale and translateY issue on Safari
body: <p>I have an animation of three arrows enlarging and moving down, using CSS transforms (scale and translateY), in addition to opacity. It works fine in Chrome, Firefox..but Safari just shows one small arrow fading in and out. Please visit the jsfiddle for a demo, which uses SCSS.</p>
  
  <p><a href="https://jsfiddle.net/hyanqerL/" rel="nofollow noreferrer">https://jsfiddle.net/hyanqerL/</a></p>
  
  <p>The following is what I am using in my project now, after using Mig's suggestions (I didn't include all the mixins in the js fiddle. They are for prefixes). It improved a bit, but is still buggy on Safari.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>$base: 9.6px;
  
  .scroll-animation {
    position: absolute;
    width: 100%;
    height: rem(41);
    bottom: rem(24);
    @include flexbox;
    @include justify-content(center);
  
    &amp;:focus {
      outline: none;
    }
  
    .chevron {
      position: absolute;
      width: $base * 3.35;
      height: $base * .3;
      opacity: 0;
      @include transform(scale(.3));
      @include animation-name(move-chevron);
      @include animation-duration(3.15s);
      @include animation-timing-function(linear);
      @include animation-iteration-count(infinite);
    }
  
    .chevron:first-child {
      @include animation-delay(0.28s);
    }
  
    .chevron:nth-child(2) {
      @include animation-delay(0.66s);
    }
  
    .chevron:before, .chevron:after {
      content: '';
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      background: white;
    }
  
    .chevron:before {
      left: 0;
      @include transform(skewY(30deg));
    }
  
    .chevron:after {
      right: 0;
      width: 50%;
      @include transform(skewY(-30deg));
    }
  
    @keyframes move-chevron {
      0% {
        opacity: 0;
        @include transform(translateY(0) scale(.3));
      }
  
      33.3% {
        opacity: 1;
        @include transform(translateY($base * 2.8) scale(1));
      }
  
      53.2% {
        opacity: .2;
        @include transform(translateY($base * 4.65) scale(0.3));
      }
  
      60.7% {
        opacity: 0;
        @include transform(translateY($base * 5.15) scale(0));
      }
  
      100% {
        opacity: 0;
        @include transform(translateY($base * 5.15) scale(0));
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>