2

I have a div which i have used the following css to generate a bacground:

background: -webkit-linear-gradient(left, #ea1f23, #ea1f23 70%, black 70%, black);

This generates a background which is 70% red and 30% black.

I have then added a transition effect, so when you hover over the element it eases in.

 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -o-transition: all .3s ease;
 -ms-transition: all .3s ease;
 transition: all .3s ease;

However there seems to be a jump in betweeen (the transition isnt very smooth). is there a way to remove this?

Please see the below fiddle.

https://jsfiddle.net/kcxon2o8/4/

danyo
  • 5,686
  • 20
  • 59
  • 119
  • 3
    Gradients are images...not colors so they can't be transitioned like that. – Paulie_D Apr 12 '16 at 14:37
  • What is it you are trying to do? – Paulie_D Apr 12 '16 at 14:38
  • 2
    @Paulie_D Well, you can transition a gradient to another gradient, but you can't transition `background-image: some-gradient();` to `background-color:black` – Niet the Dark Absol Apr 12 '16 at 14:38
  • [Example](https://jsfiddle.net/kcxon2o8/5/) transitioning from "red-red-black-black" gradient to "black black black black" gradient. – Niet the Dark Absol Apr 12 '16 at 14:39
  • [Example](https://jsfiddle.net/kcxon2o8/6/) transitioning by keeping the colours the same, but transitioning the cutoff point to make it all black. These two examples should explain why you can't just say "transition to black", you have to say how ;) – Niet the Dark Absol Apr 12 '16 at 14:40
  • It's not actually *transitioning* though...it's just changing immediately - https://jsfiddle.net/kcxon2o8/11/ – Paulie_D Apr 12 '16 at 14:42
  • so is it not possible then? I have also tried transitioning to another gradient. – danyo Apr 12 '16 at 14:51
  • To prevent the jump you may have to do `background: black -webkit-linear-gradient(left, #ea1f23, #ea1f23 70%, black 70%, black);`. Because it is removing the gradient and then making the background-color black. So in between your background-color is set to none. – Pierre C. Apr 12 '16 at 14:53
  • http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions – Paulie_D Apr 12 '16 at 14:53

0 Answers0