Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

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 - /

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.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

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.

• html
• code
• buttons
• css

• Any other answers would be helpful – Harvey Commented Aug 14, 2019 at 12:47

1 Answer 1

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