The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Webkit-Transition on Webkit-Gradients

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #32621


    I am working on a site and there I change from one -webkit-gradient to another.
    Now I am trying to animate this change smoothly with -webkit-transition, but it doesn’t work.

    Is there a way to make such a transition from gradient to gradient?
    (or any jQuery plugin for it?)

    Best wishes,


    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.

    -webkit-transition-duration: .5s;
    Chris Coyier

    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.