yukulele

/**
 * Negative animation-delay to start mid-animation
 */

@keyframes test {
	to { background: black }
}

html {
	background: white;

yukulele

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

yukulele

/* height of higher child */

nav{
	font-size:3em;
	position:absolute;
	z-index:2;
}
a{
	text-decoration:none;
	display:inline-block;

yukulele

/* Hexagon kitty - By @LeaVerou
   Disappointingly inflexible, but still interesting methinks.
 */

.hexagon {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
	transform: scale(1.25,.707) rotate(-45deg);

yukulele

h1 {color: #345; text-shadow: 1px 1px 2px #aaa; font-size:1.8em}
h2 {color: #567; text-shadow: 1px 1px 2px #aaa; font-size:1.1em}
h3 {margin-bottom: 0; color: #678; text-shadow: 1px 1px 2px #aaa; font-size:1em}
#sizer{
	resize:horizontal;
	max-width:800px;
	background:#ccc;
	padding:40px;
	border-radius:20px;
	overflow:hidden;

yukulele

/*matrix transform experiments*/

div{
	width:200px;
	height:200px;
	margin:50px;
	background:grey;
	transition:transform 1s ease;
	border-top-right-radius:100px;
	transform:matrix(1,0,0,1,0,0);

yukulele

/*matrix experiments*/

div{
	width:200px;
	height:200px;
	margin:50px;
	background:grey;
	transition:transform 1s ease;
	border-top-right-radius:100px;
	transform:matrix(1,0,0,1,0,0);

yukulele

// if Navigation Timing is not supported, fallback to Date.naw() called on start (sufficient in many cases)
// Date.now is also polyfilled
(function(p){
  if(!Date.now)
    Date.now = function(){return +new Date};
  
  if (!p.now){
    var start = (p.timing && p.timing.navigationStart) || Date.now();
    p.now = function now(){
      return Date.now() - start;

yukulele

/*
Psuedo element test on <img>
*/
h1:after{
	content:"h1 after";
	color:pink;
}
h1:before{
	content:"h1 before";
	color:blue;

yukulele

/**
 * (C)Leanest CSS spinner ever
 */

@keyframes spin {
	to { transform: rotate(1turn); }
}

.progress {
	position: relative;