1

After updating to the most recent version of Firefox I am having issues with my CSS Animations.

On my website of camerabeanbags.co.uk I have animated buttons where the gradient is animated across the asset.

This is working fine in Google Chrome and it was working fine in Firefox until I updated my firefox version.

On this page you can find one of the buttons which should be animated - The add to basket button is animated in Chrome but not firefox - https://www.camerabeanbags.co.uk/product/standard-camera-bean-bag/

The Code I am using is below for one of the buttons. (add to basket button)

.single-product div.product form.cart .button {
    color: #fff;
  background: -webkit-linear-gradient(180deg,#1b8c0f, #c2cc36, #1b8c0f);
    background: -moz-linear-gradient(180deg,#1b8c0f, #c2cc36, #1b8c0f);
    background-size: 400% 400%;
    animation: BackgroundGradient 10s ease infinite;
    -moz-animation: BackgroundGradient 10s ease infinite;
    -webkit-box-shadow: inset 0 0 0 0px #ff3366;
    -moz-box-shadow: inset 0 0 0 0px #ff3366;
}

.single-product div.product form.cart .button:hover {
    color: #fff;
  background: -webkit-linear-gradient(180deg,#1b8c0f, #c2cc36, #1b8c0f);
    background: -moz-linear-gradient(180deg,#1b8c0f, #c2cc36, #1b8c0f);
    background-size: 400% 400%;
    animation: BackgroundGradient 3s ease infinite;
     -moz-animation: BackgroundGradient 3s ease infinite;
    -webkit-box-shadow: inset 0 0 0 0px #ff3366;
    -moz-box-shadow: inset 0 0 0 0px #ff3366;
    transition: all .2s ease-in-out; 
    transform: scale(1); 
}



@keyframes BackgroundGradient {
                0% {background-position: 0% 50%;}
                50% {background-position: 100% 50%;}
                100% {background-position: 0% 50%;}
}

@-moz-keyframes BackgroundGradient {
                0% {background-position: 0% 50%;}
                50% {background-position: 100% 50%;}
                100% {background-position: 0% 50%;}
}

I'm not sure why this isn't working after updating Firefox. If you open the page in Chrome and Firefox you will see the animation working and not working. Any help will be appreciated as I'm not sure what could be wrong here.

closed as off-topic by fuxia Aug 15 at 10:14

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Any other answers would be helpful – Harvey Aug 14 at 12:47
0

We can't transition CSS gradients (to another gradient) yet, I've provided a lil' workaround using a pseudo element. The shown transition is triggered by the opacity property.

Source: https://codepen.io/sashtown/pen/DfdHh

Example 2: https://codepen.io/drazend/pen/JVMgBq

  • If you look at the code it works for google chrome and was working for Firefox, I’m not trying to transition one gradient to another, it’s 1 gradient and the position of the colour visible moves as it’s 400x – Harvey Aug 14 at 12:47
  • If you are only moving background size on hover, why so much unnecessary CSS? You can check example2 it is same thing just play around with background size to fit your colors, and change background image colors. – dado Aug 14 at 12:58
  • Forget about the hover css, it is the gradient background which should be animating with no hover anyway. the other hover css is a work in progress and will be changing. it is begin tested – Harvey Aug 14 at 13:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.