try using webkit-keyframes animation instead of transition. Remember keyframes only work in webkit browsers where as transitions and gradients have good cross-browser support, so you’d definately need some js fallback.
I think what I might do is make both gradients actually one gradient. Think of the first one as from 0% o 50%, and the second one from 50% to 100%. Then make the background-size of the element actually twice the size of the element in one direction. Then on whatever event you want to trigger the change, shift the background-position (which you can definitely animate or transition).
Viewing 4 posts - 1 through 4 (of 4 total)
The forum ‘CSS’ is closed to new topics and replies.