CSS #property --rotate not working in Safari - html

Question

this card's animation works fine in chrome but not compatible with safari and Mozilla Firefox.
I think it is because of #property --rotate, which is no longer compatible with safari so i am looking for a new function to replace it.
<div class="card"></div>
#property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
:root {
--card-height: 65vh;
--card-width: calc(var(--card-height) / 1.5);
}
.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
font-family: cursive;
}
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
#keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}

Answer 1

The #property directive is not supported in Safari, so you'll need to find an alternative way to accomplish your goal.
One alternative approach to animating the gradient would be to use CSS animations instead of custom properties. Here is an example:
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(to right, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}