Firefox CSS Animations Broke

by Harvey   Last Updated August 14, 2019 09:08 AM - source

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.



Related Questions


WP-Pagenavi Assigning different colors to buttons

Updated December 07, 2018 20:08 PM

<p></p> tags stripped from coding

Updated April 02, 2019 11:08 AM

An unwanted inline style is added to my body tag

Updated August 14, 2017 12:08 PM


How to add ID to button

Updated June 12, 2017 21:08 PM