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-就我所知，这并不是严格必要的，但很有用。

大纲CSS动画不适用于Safari

1 个答案: