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中的实际行为：

我试图在我的CSS前面添加Webkit前缀，但这不会改变结果。

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>