css - 大纲 CSS 动画不适用于 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 - 据我所知，这不是绝对必要的，但可以用来查看。