Safari

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

Stack Snippet

.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>