0

I have a td of class "open".

<td class="open"><a class="order-btn">פנוי</a></td>

I have implemented a basic transition effect for the background, however the change remains immediate with no duration. Here is my CSS.

.open{
  background: yellowgreen;
  color: black;
  transition: background 2s ease-in;
  -moz-transition: background 2s ease-in;/* Firefox 4 */
  -webkit-transition: background 2s ease-in; /* Safari and Chrome */
  -o-transition: background 2s ease-in; /* Opera */
}

.open:hover{
  background: radial-gradient(GreenYellow, yellowgreen);
}

Any help would be greatly appreciated.

Bigga
  • 538
  • 6
  • 16
  • 1
    the duplicate deal with linear-gradient but it's the same as radial gradient .. you cannot add transition, you need to play with background-size and/or background-position --> https://jsfiddle.net/dg1o9pej/ – Temani Afif May 10 '18 at 08:35
  • remove transition property in your css and check – PPL May 10 '18 at 08:36
  • Temani, I'm not sure I understood... do you mean that transition does not work with the gradient property? PPL, what do you mean? If I remove the transition property I'll be left with the normal change during hover which is already working. I would just like to give the effect a duration. – Bigga May 10 '18 at 08:39
  • yes, you cannot have transition with gradient, like you cannot have transition with display, etc. Check the fiddle and question above to have some workaround – Temani Afif May 10 '18 at 08:44
  • Another way is to fade in/out pseudo elements --> https://jsfiddle.net/gpo0btgm/ – Markus May 10 '18 at 09:01

0 Answers0