Animated Gradient in Firefox not working

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>

Animated properties should only have one value as per the standard, Chrome extends that limitation. You would need to create a div relatively positioned below the text and animate its left property (I'm too lazy to do it). See this [question](https://stackoverflow.com/questions/8378696/background-position-animation-in-jquery-not-working-in-firefox) — Javier Rey, Sep 20 '17 at 20:42
This works perfect on both: https://codepen.io/P1N2O/pen/pyBNzX, here the transition is applied on body. — bhansa, Sep 20 '17 at 20:44
I was basing my button on this codepen example, but just didn't work. I got it work using pixels instead of percentages. Not the first time Firefox hasn't like using percentages. — JeanLeSheep, Sep 20 '17 at 20:49

Penny Liu · Answer 1 · 2018-07-03T03:41:19.490

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>

Animated Gradient in Firefox not working

1 Answers1