UPDATE: After further testing, it appears that the code functions correctly within the SO snippet view. To replicate the issue, please copy the code and save it locally.
UPDATE 2: Odd behavior detected. Refer to this gist and video for more information.
I'm attempting to create a logo with a pulsating animation, but I've encountered a strange issue while testing it on Safari 11.1.1. The animation works correctly on Firefox 60.0.2 and Chrome 67.0. If possible, please test it on Edge and IE and share your results.
Below is a minified snippet that showcases the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<style>
.foo-logo {
height: 10rem;
width: 10rem;
margin: 2.5rem;
background-color: red;
}
.foo-logo > p {
color: white;
font-size: 1.5rem;
text-align: center;
}
.foo-animation {
animation: pulse-animation 5s infinite;
}
@keyframes pulse-animation {
0% {
height: 10rem;
width: 10rem;
margin: 2.5rem;
}
50% {
height: 15rem;
width: 15rem;
margin: 0rem;
}
100% {
height: 10rem;
width: 10rem;
margin: 2.5rem;
}
}
</style>
</head>
<body>
<div class="foo-logo"><p>No animation</p></div>
<div class="foo-logo foo-animation"><p>Animation</p></div>
</body>
</html>If you cannot access Safari, refer to this screenshot: https://i.sstatic.net/OLXOT.png