Outline CSS Animation не работает в Safari

Question

Я пытаюсь установить анимацию на некоторых из моих кнопок, добавив выделенный класс.Я создал анимацию, которая работает в Chrome, но не в Safari (я использую SCSS, поэтому для меня он автоматически имеет префикс).

Когда я пробую другие свойства (например, вращение), анимация фактически работает, но не с "контуром".Я также попытался «отделить» свойства (вместо сокращенной версии), но безрезультатно.

.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;
  }
}

<button class="awesome comparable_data">Awesome</button>

<button class="awesome comparable_data">Awesome</button>

.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;
  }
}

В Chrome моя кнопка «светится», а контур расширяется назад и вперед от кнопки.На Safari ничего не происходит ... и я не могу понять, почему.

Answer 1

Мне удалось заставить его работать, указав начальное состояние в классе comparable_data:

.comparable_data {
  animation: showComparableData 1s linear infinite alternate;
  outline: 2px solid red;
}

@keyframes showComparableData {
  0% {
    outline: 0px solid red;
    outline-offset: 0px;
  }
  65% {
    outline: 1px solid red;
    outline-offset: 1px;
  }
  75% {
    outline: 4px solid red;
    outline-offset: 4px;
  }
  100% {
    outline: 5px solid red;
    outline-offset: 5px;
  }
}

<button class="awesome comparable_data">Awesome</button>

Возможно, вам придется отредактировать значения или добавить какое-либо поле, поскольку оно иногда выходит из поля зрения.

Я также добавил outline-offset к первому ключевому кадру - насколько я знаю, это не является строго необходимым, но может быть полезно увидеть.