/mike

Today I was revisiting my last attempt at doing sliding backgrounds or transitions with WebKit specific CSS properties. For some reason I thought there was another way around it. So far, I haven’t found one to achieve the effect I’m going for but I did find something very interesting about -webkit-transitions.

The What

In order to use -webkit-transition on a -webkit-gradient in the background property, it seems you need to make sure there is some transparency in the -webkit-gradient. It doesn’t seem to matter which part of the gradient has transparency — the to(), from(), or color-stop() — just as long as one of them has it.

Let me explain

In my last example I discovered that it was not possible to transition from one background using -webkit-gradient to another. That still holds true.

However, what I didn’t realize at the time is that, for some reason, I couldn’t get transitions to work on background gradients that were defined with hexadecimal colours. I tried the following combinations:

• From: background: -webkit-gradient(linear, left top, left bottom, to(#f00), from(#00f), color-stop(0.5, #f00));
  To: background-color: #c80;
• From: background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,0,255,1)), from(rgba(255,0,0,1)), color-stop(0.5,rgba(50,50,255,1)));
  To: background-color: #c80; and
• From: background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,0,255,1)), from(rgba(255,0,0,1)), color-stop(0.5,rgba(50,50,255,.1)));
  To: background-color: #c80;

Guess which one worked?

The Finale

This has shown me two things.

1. In order to transition a background colour with -webkit-transition and -webkit-gradient you need at least one property of the -webkit-gradient to be somewhat transparent — though it does seem to work best when the transparency is on color-stop.
2. The -webkit-gradient sits on top of the background-color and background-image properties — meaning that it has a higher z-index.

Now go, my web minions, and play with whatever gradients you can come up with — it’s what makes websites part of Web 2.0 don’t you know. ;)