When I'm saving custom CSS animations for my alert using CSS properties, the "<percentage>" gets removed. I used it animate gradient backgrounds. It's not a interactive tag, it is a syntax identifier. I guess it got identified as a interactive HTML tag and got removed.

@property --anim {
syntax: "<percentage>";
initial-value: 100%;
inherits: false;
}
@property --shade {
syntax: "<percentage>";
initial-value: 60%;
inherits: false;
}

@keyframes alert-animation {
0% {
--anim: 0%;
--shade: 90%;
}
8.333333333333332% {
--anim: 102%;
--shade: 40%;
}
50% {
--shade: 95%;
}
91.66666666666667% {
--anim: 100%;
--shade: 40%;
}
100% {
--anim: 0%;
--shade: 20%;
}
}

.bg-base{
--anim: 100%;
left: -1rem;
padding-left: 2rem;
padding-right: 1rem;
position: relative;
background-color: blue;
transform: skew(-20deg, 0deg) translate(calc(-100% + var(--anim)), 0%);
display: inline-block;
}

.bgc-default{
background: #2e2e2e;
background: linear-gradient(90deg, rgba(46, 46, 46, 1) 0%, rgba(31, 31, 31, 1) 10%, rgba(50, 50, 59, 1) var(--shade), rgba(31, 31, 31, 1) 100%);
}

.bgc-tint{
background: #32b84c;
background: linear-gradient(90deg, rgba(50, 170, 76, 1) 0%, rgba(5, 130, 24, 1) 20%, rgba(33, 179, 69, 1) var(--shade), rgba(5, 130, 24, 1) 100%);
}