'Safari: CSS animation doesn't start second time when transitioning from display: none to display: block

I have this simple animation triggered when transitioning from display: none to display: block. It works perfect on Chrome but on Safari it is triggered only for first time, when I hide element and then show it again second time, it is not working.

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions