时间戳

首页 > 解决方案 > 大纲 CSS 动画在 Safari 上不起作用

css - 大纲 CSS 动画在 Safari 上不起作用

问题描述

我正在尝试通过添加一个专用类在我的一些按钮上设置动画。我创建了一个动画，它可以在 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 上，什么都没有发生……我不知道为什么。

标签： csssafari

解决方案

我可以通过在类中指定一个起始状态来让它工作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第一个关键帧中添加了一个 - 据我所知，这不是绝对必要的，但可以用来查看。

推荐阅读