oli

/* CSS Transitions test cases */
/* ref: http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/
        http://dev.w3.org/csswg/css3-transitions/#starting */

div {width: 80px; height: 80px; border: 1px solid #ccc;}
div > div {width: 50px; height: 50px; margin: 14px; border-color: #777;}
/* transition on mouseover, not mouseout (snaps back) */
.one:hover div {transition: transform 1s linear; transform: rotate(270deg);}
/* transition on default state: transitions both ways */
.two div {transition: transform 1s linear;}

oli

/* CSS Transitions we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
4 display between none & anything
5 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)
7 max-height/max-width workaround for height/width

oli

/* 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 */

oli

/* 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)

oli

/* Transitions bug with links */
/* ref: http://jsfiddle.net/sMH9K/embedded/result,html,css/ */
body {background-color: #ccc;}
a {
  font-size: 300%;
  color: blue;
  transition: all 1s linear;
}
a:visited {color: yellow;}
a:visited:hover, a:hover, a:focus, a:active {color: red;}

oli

/* anti-aliasing in 2D and 3D transforms */
/* from KrofDrakula https://github.com/LeaVerou/prefixfree/issues/16 */
.wrapper {width: 264px;}
div > div, .box {
  width: 240px;
  height: 80px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;

oli

/* CSS Animations basic tests */
/* via default (on page load), :hover and :checked */
@keyframes startsame {from {background-color: rgba(245,163,163,.7);}}
@keyframes endsame {to {background-color: rgba(163, 245, 163, .7);}}
@keyframes startonly {from {background-color: #ccc;}}
@keyframes endonly {to {background-color: #ccc;}}
@keyframes bothsame {
  from {background-color: rgba(245,163,163,.7);}
  to {background-color: rgba(163, 245, 163, .7);}
}

oli

/* CSS Animations test: multiple keyframes, shorthand */
.box {
  width: 250px;
  height: 80px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}
@keyframes multiple {

oli

/* CSS Animations we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
5 display between none & anything
6 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)

oli

/* CSS Animations timing functions edge cases */
/* steps, “bounce”, different units (px → %) */
.box {
  width: 124px;
  height: 32px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}