Tuto Transitions CSS - Exemple 1

dabblet.css

/**
 * Tuto Transitions CSS - Exemple 1
 */

html {
	height:100%;
	box-shadow:inset 0 0 50em #335a54; 
}

body {
	font-family:"Heiti SC", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
	padding:200px;
	text-align:center;
	background-color:#b6dee0;
	transition-property:background-color;
	transition-duration: 1s;
	transition-delay:1s;
}

p {
	font-size:4em;
	text-decoration:none;
	color:#64a096;
	margin:0;
	color:transparent;
	text-shadow:0 0 5px #64a096;
	transition-property:color, letter-spacing, transform, font-size;
	transition-duration: 1.5s;
	transition-timing-function: ease-in-out;
	transform:rotate(20deg);
}

body:hover {
	background-color:#64a096;
}

body:hover p {
	font-size:8em;
	color:#ffffd2;
	letter-spacing:6px;
	transform:rotate(-20deg);
}

dabblet.html

<p>Transition</p>

settings.json

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