Question 390346 in CSS Question posted in
Some basic documentation can be found here.

Css – Animation in firefox browser

I made a button with an gradient animation border that is rotation. It works fine in Safari & Chrome, but in Firefox it’s lacking the smooth keyframes.

I tried to add the -moz- but it didn’t work. Any suggestions how I can make it work? Thanks!

button {
  border-radius: 1rem;
  border: none;
  padding: 0.6em 1.2em;
  font-size: 3em;
  font-weight: 600;
  font-family: var(--font-firacode);
  background-color: #2C2C2C;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.90) inset;
  cursor: pointer;
  position: relative;
}
button::before,
button::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.3rem;
  background:linear-gradient(
    var(--gradient-angle),
    var(--blue-color),
    var(--green-color),
    var(--yellow-color),
    var(--pink-color));
  border-radius: inherit;
  animation: rotation 2s ease-in-out infinite;
  
}
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotation {
  0% {
    --gradient-angle: 90deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
  
}
Tags:

2

Answers


  1. 0

    The @property rule is not supported in firefox except in Nightly builds

    See tables here

    Login or Signup to reply.
  2. 0

    It is a compatibility issue. Check this

    The support tables indicate that only the last version of Firefox (129) supports @property. Not only that, but support is only available experimentally on Firefox Nightly for now, which is the in-development version of Firefox.

    Firefox 129 is expected to be released on August 6th, 2024. And it will take a long while for most people to transition to that version.

    There really isn’t a better way of doing this for it to work on Firefox (without involving JavaScript) since @property was meant to solve these issues with animating and transitioning with custom properties. Anyways, if you want to use JS, here is a sample solution (you’ll probably want to modify it according to your needs)

    let angle = 90;
const increment = 1; // Change the increment value to control the speed
const button = document.querySelector('button'); //probably change the selector to be specific to that button

function updateGradient() {
  angle = (angle + increment) % 360;
  button.style.setProperty('--gradient-angle', `${angle}deg`);
  requestAnimationFrame(updateGradient);
}

updateGradient();
    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background-color: #fff;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  border-radius: 1rem;
  border: none;
  padding: 0.6em 1.2em;
  font-size: 3em;
  font-weight: 600;
  font-family: var(--font-firacode);
  background-color: #2C2C2C;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.90) inset;
  cursor: pointer;
  position: relative;
}
button::before,
button::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.3rem;
  background:linear-gradient(
    var(--gradient-angle),
    blue,
    green,
    yellow,
    pink);
  border-radius: inherit;
}
    <button>Hello</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search