当从display:none转换到display:block时，我触发了这个简单的动画。它在Chrome上运行得很好，但在Safari上，它只在第一次触发，当我隐藏元素，然后第二次再次显示时，它不起作用。
.child1 {
display: none;
}
.child2 {
display: block;
}
.visibility .child1 {
display: block;
}
.visibility .child2 {
display: none;
}
@keyframes myAnimation {
0% { transform: scale(0.5); }
}
.animated {
animation: myAnimation 0.4s ease-out;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="testdiv" class="visibility">
<div class="child1">Hello</div>
<div class="child2 animated">Bye</div>
</div>
<script>
const elem = document.getElementById("testdiv");
elem.addEventListener("click", () => {
if (!elem.classList.length) {
elem.classList.add("visibility");
} else {
elem.classList.remove("visibility")
}
})
</script>
</body>
</html>诀窍是：给动画一个很小的延迟，比如0.0001s，就可以了。
.animated {
animation: myAnimation 0.4s ease-out 0.0001s;
}
当您将CSS动画与display(一种不可设置动画的属性(一起使用时，不同的浏览器会以不同的方式处理这一问题，而且在某种程度上是不可预测的。
当我们放置一个小延迟时，它之所以有效，是因为在文本从右向左滑动之前，文本不应该出现在屏幕上，因此，display: none。然而，正如我所说，display是不可设置动画的，所以文本会立即出现，导致没有可见的过渡，我们所做的是给它一些时间让它消失。
无论如何，这仍然是一个技巧，当你切换到Safari上的另一个选项卡然后返回时，动画将不会运行。动画最好不要使用display。