Using multiple values for CSS Transitions

dabblet.css

/* Using multiple values for CSS Transitions
1 individual: declare three transitions as comma-separated per property
2 repeated: as individual, but transition delay only declared once
3 shorthand property
Results:
  * Chrome 16: in .repeated single value is repeated
  * Safari 5.1.2: in .repeated single value is repeated
  * FF 9: in .repeated single value is repeated
  * Opera 11.60: in .repeated single value is repeated (but box-shadow instant in all)
 */
.wrapper {height: 10em;}
div > div {
  position: absolute;
  top: 1em;
  left: 2%;
  opacity: .5;
  width: 20%;
  border: 3px solid #555;
  border-radius: .5em;
  padding: .33em 0;
  background: #fff;
  text-align: center;
  transition-timing-function: linear;
}
.individual {
  transition-property:  left, opacity, box-shadow;
  transition-duration:    2s,   500ms,         1s;
     transition-delay:    0s,      0s,         1s;
}
.repeated {
  top: 4em;
  transition-property:  left, opacity, box-shadow;
  transition-duration:    2s,   500ms,         1s;
     transition-delay:  1s;
}
.shorthand {
  top: 7em;
  transition: left 2s linear, opacity 500ms linear, box-shadow 1s linear 1s;
}
.wrapper:hover > div {
  left: 78%;
  opacity: 1;
  box-shadow: 0 0 10px red;
}

dabblet.html

<div class="wrapper">
<div class="warning individual">individual</div>
<div class="warning repeated">repeated</div>
<div class="warning shorthand">shorthand</div>
</div>

settings.json

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