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.