CSS Transitions with transparency, rgba, hsla

dabblet.css

/* CSS Transitions with transparency, rgba, hsla */
/* color transitions occur in rgba color-space
this means transitioning hsla lightness or hue doesn’t work as expected */
div {height: 80px; position: relative;}
div > div {width: 100px; height: 50px; border: 1px solid #999; transition: all 2s;}
span {float: left; margin-left: 124px; margin-top: -50px;}
/* transparent → rgba */
.one div {background-color: transparent;}
.one:hover div {background-color: rgba(191, 63, 63, .8);}
/* transparent → hsla */
.two div {background-color: transparent;}
.two:hover div {background-color: hsla(0,50%,50%,.8);}
/* rgba → hsla */
.three div {background-color: rgba(255,255,255,.8);}
.three:hover div {background-color: hsla(0,50%,50%,.8);}
/* hsla saturation */
.four div {background-color: hsla(0,0%,50%,.8);}
.four:hover div {background-color: hsla(0,100%,50%,.8);}
/* hsla lightness — would transition through red in HSLa colorspace */
.five div {background-color: hsla(0,50%,0%,.8);}
.five:hover div {background-color: hsla(0,50%,100%,.8);}
/* hsla hue — would transition through hues not gray in HSLa colorspace */
.six div {background-color: hsla(0,50%,50%,.8);}
.six:hover div {background-color: hsla(180,50%,50%,.8);}
/* light gray to transparent — transition gets darker in premultiplied color space (Opera, old WebKit (<2010)) */
.seven div {background-color: transparent;}
.seven:hover div {background-color: red;}
/* workaround for premultiplied color browsers: use RGBa */
.eight div {background-color: rgba(255,0,0,0);}
.eight:hover div {background-color: rgba(255,0,0,1);}

/* See also:
[Testing Color Interpolation](http://jsfiddle.net/nimbu/fsRYK/)
[Transitioning from "transparent" shouldn’t go through gray](https://bugs.webkit.org/show_bug.cgi?id=34383)
[Transitions with alpha test case](http://dbaron.org/css/test/2009/transitions-alpha)
[Premultiplied color testcase for Opera](http://bugs.hawn.be/opera/transitions/color/)
*/

dabblet.html

<div class="one"><div>one</div><span>transparent → rgba</span></div>
<div class="two"><div>two</div><span>transparent → hsla</span></div>
<div class="three"><div>three</div><span>rgba → hsla</span></div>
<div class="four"><div>four</div><span>hsla saturation</span></div>
<div class="five"><div>five</div><span>hsla lightness — this would transition through red in HSLa, but the colors are converted to RGBa</span></div>
<div class="six"><div>six</div><span>hsla hue — this would transition through orange, yellow & green in HSLa, but the colors are converted to RGBa</span></div>
<div class="seven"><div>seven</div><span><code>#ddd</code> to <code>transparent</code> — unintuitively this gets darker when the transition is in non-premultiplied colorspace (Opera, pre-2010 WebKit)</span></div>
<div class="eight"><div>eight</div><span>Workaround: use RGBa (seven &amp; eight are basically the same in premultiplied colorspace)</span></div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}