title: Outline CSS Animation not working on Safari
body: <p>I am trying to set an animation on some of my buttons by adding a dedicated class. I have created an animation, which works in Chrome, but not in Safari (I'm using SCSS, so it's automatically prefixed for me). </p>
  
  <p>When I try other properties (such as rotate), the animation actually works, but not with "outline". I also have tried to "separate" the properties (instead of the shorthanded version), to no avail. </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>.comparable_data {
    animation: showComparableData 1s linear infinite alternate;
  }
  
  @keyframes showComparableData {
    0% {
      outline: none;
    }
    65% {
      outline: 1px solid red;
      outline-offset: 1px;
    }
    75% {
      outline: 4px solid red;
      outline-offset: 4px;
    }
    100% {
      outline: 5px solid red;
      outline-offset: 5px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="awesome comparable_data"&gt;Awesome&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;button class="awesome comparable_data"&gt;Awesome&lt;/button&gt;
  
  .comparable_data {
    animation: showComparableData 1s linear infinite alternate;
  }
  
  @keyframes showComparableData {
    0% {
      outline: none;
    }
    65% {
      outline: 1px solid color(default);
      outline-offset: 1px;
    }
    75% {
      outline: 4px solid color(default);
      outline-offset: 4px;
    }
    100% {
      outline: 5px solid color(default);
      outline-offset: 5px;
    }
  }
  </code></pre>
  
  <p>On Chrome, my button is "glowing" with the outline expanding back and forth from the button. On Safari, nothing is happening... and I cannot figure out why.</p>