DIV.transition {
	border: 1px solid black;
	background: grey;
	transition: all 3s ease-in;
}
DIV.transitionhover {
	border: 1px solid block;
	background: #fff;
	+:hover {
		border: 5px solid red;
		background-color: #c0c0c0;
		transition: 'border 1s linear, background-color 1s linear .1s';
	}
}
DIV.transitionpadding {
	border: 1px solid block;
	background: #fff;
	padding-left: 20;
	opacity : 1;
	+:hover {
		opacity : 0.5;
		padding-left: 200;
		background-color: #c0c0c0;
		transition: 'padding-left 2s ease-out, opacity 2s ease-out';
	}
}

DIV.translate {
	border: 1px solid blue;
	transform: translate(100,20);
}

DIV.rotate {
	border: 1px solid green;
	transform: translate(100,70)+' '+rotate(70);
	display:block;
	width:300px;
	height:30px;
}

DIV.transitionrotate {
	display:block;
	width : 300px;
	height : 30px;
	border: 1px solid black;
	background: #ccc;
	+:hover {
		background: #c0c0c0;
		transform: translate(30,40)+' '+rotate(10);
		transition: -webkit-transform 1s linear;
	}
}
DIV.transitionrotate {
	// using both -webkit-transform and -moz-transform in the same transition rule causes safari/chrome to fail
	// but using a secondary css rule like this does work
	// a variable could be used to share values between the rules
	+:hover {
		transition: -moz-transform 1s linear;
	}
}

DIV.matrix {
	transform: matrix(1, -0.2, 0, 1, 0, 0);
}

DIV.scale {
	transform-origin: top left;
	transform: scale(4,2);
}

DIV.transitionproperties {
	transform-origin: bottom left;
	transition-property: left, top, background, -webkit-transform;
	transition-duration: '2s, 2s, 1s, 1s';
	transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	transition-delay: '0s, 0s, 0s, 1s';
}