css - Safari 中意外的 CSS 动画行为

Question

我有以下 HTML:

<p class="animate">X</p> 

这是我的 CSS:

.animate {
    animation-duration: 0.75s;
    animation-name: add-icon;
    font-size: 8em;
}

@keyframes add-icon {
    0% {
        font-size: 18em;
    }
    25% {
        font-size: 6em;
    }
    60% {
        font-size: 13em;
    }
    100% {
        font-size: 8em;
    }
}

这是我希望看到的:(在 Firefox、Chrome、Edge 中测试过)

但这就是它在 Safari 11 中的实际行为:

我尝试用 Webkit 前缀为我的 CSS 添加前缀，但这并没有改变结果。

Here's a working demo of my problem.

Answer 1

使用 rem 而不是 em

实际上 em 依赖于父元素而 rem 依赖于根元素...所以最好使用 rem 而不是 em。

Read this article

堆栈片段

.animate {
  animation-duration: 0.75s;
  animation-name: add-icon;
  font-size: 8rem;
}

@keyframes add-icon {
  0% {
    font-size: 18rem;
  }
  25% {
    font-size: 6rem;
  }
  60% {
    font-size: 13rem;
  }
  100% {
    font-size: 8rem;
  }
}

<p class="animate">X</p>