Outline CSS Animation not working on Safari - css

Question

I am trying to set an animation on some of my buttons by adding a dedicated class. I have created an animation, which works in Chrome, but not in Safari (I'm using SCSS, so it's automatically prefixed for me).
When I try other properties (such as rotate), the animation actually works, but not with "outline". I also have tried to "separate" the properties (instead of the shorthanded version), to no avail.
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
<button class="awesome comparable_data">Awesome</button>
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid color(default);
outline-offset: 1px;
}
75% {
outline: 4px solid color(default);
outline-offset: 4px;
}
100% {
outline: 5px solid color(default);
outline-offset: 5px;
}
}
On Chrome, my button is "glowing" with the outline expanding back and forth from the button. On Safari, nothing is happening... and I cannot figure out why.

Answer 1

I was able to get it to work by specifying a starting state in the comparable_data class:
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
outline: 2px solid red;
}
#keyframes showComparableData {
0% {
outline: 0px solid red;
outline-offset: 0px;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
You might need to edit the values or add some margin, since it clips out of view sometimes.
I also added an outline-offset to the first keyframe - it's not strictly necessary, as far as I know, but can be useful to see.