Animated Gradient in Firefox not working - css

Question

I'm trying to achieve and animated gradient button that I've seen executed before and works in Firefox, but for some reason mine isn't work. I've tried prefixing the animations, but that did nothing.
.bookParty {
background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
display: inline-block;
background-size: auto 200%;
background-position: 0 100%;
padding: 15px;
animation: Gradient 5s linear infinite forwards;
transition: all .6s ease;
}
#keyframes Gradient {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
<div class="bookParty">
<span class="skew"><h2>Book a Party</h2></span>
</div>

Answer 1

Working example here:
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(transparent, rgba(0, 0, 0, .6)), linear-gradient(to bottom right, #ECECEC 50%, transparent 50%, #fff 50%);
height: 100vh;
width: 100vw;
}
.bookParty {
-webkit-animation: Gradient 3s linear infinite;
-z-animation: Gradient 3s linear infinite;
-o-animation: Gradient 3s linear infinite;
animation: Gradient 3s linear infinite alternate;
background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
background-size: 200% 200%;
padding: 25px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 3vw;
font-weight: bold;
text-shadow: 0 8px 16px rgba(0, 0, 0, .3);
color: #fff;
}
#keyframes Gradient {
to {
background-position: 50vw;
}
}
<div class="bookParty">
<span>Book a Party</span>
</div>