html - Firefox CSS Animations Broke

admin管理员组

文章数量:1415644

Closed. This question is off-topic. It is not currently accepting answers.

---

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.

Improve this question

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.

Closed. This question is off-topic. It is not currently accepting answers.

---

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.

Improve this question

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

Share Improve this question asked Aug 14, 2019 at 8:19 HarveyHarvey 1111 bronze badge 1

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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： htmlFirefox CSS Animations Broke