SO #19125580: smiley face animation.

dabblet.css

/* SO #19125580: smiley face animation. */

fieldset {
	color: #666;
	font: 14px Segoe UI, sans-serif;
	border: 2px solid #ccc;
	width: 400px;
	margin: auto;
}

legend {
	font-weight: bold;
	font-size: 20px;
	padding: 0px 8px;
}

#happiness {
	background: #666;
	width: 350px;
	height: 20px;
	margin: 10px auto 200px;
	position: relative;
}

#happiness input {
	appearance: none;
	outline: none;
	border: none;
	display: block;
	float: left;
	width: 39px;
	height: 24px;
	margin: -2px -2px;
	padding: 0;
}

#happiness input:checked {
	background: #ccc;
	box-shadow: 0 0 4px rgba(0,0,0,.9);
}

#happiness label {
	background: transparent !important;
	visibility: hidden;
	width: 350px;
	position: absolute;
	top: 30px;
	left: 0;
	font-size: 40px;
	text-align: center;
}

#happiness input:checked + label {
	visibility: visible;
}

#face {
	background: transparent !important;
	border: 5px solid #666;
	border-radius: 50%;
	height: 100px;
	width: 100px;
	position: absolute;
	top: 100px;
	left: 120px;
	transition: border-color 1s;
}

#face:before,
#face:after {
	background: #666;
	border-radius: 50%;
	content: '';
	display: block;
	height: 10px;
	width: 10px;
	position: absolute;
	top: 30px;
	transition: background 1s;
}

#face:before {
	left: 25px
}

#face:after {
	right: 25px;
}

#mouth {
	background: #666;
	border-radius: 3px;
	height: 6px;
	width: 50px;
	position: absolute;
	top: 170px;
	left: 150px;
	transition: background-color 1s, border-radius 1s, margin-top 1s, height 1s;
}

#feel-0:checked ~ label,
#feel-0:checked ~ #mouth,
#feel-0:checked ~ #face,
#feel-0:checked ~ #face:before,
#feel-0:checked ~ #face:after {
	background: #009;
	border-color: #009;
	color: #009;
}

#feel-0:checked ~ #mouth {
	border-radius: 30px 30px 0 0;
	height: 20px;
	margin-top: -5px;
}

#feel-1:checked,
#feel-1:checked ~ label,
#feel-1:checked ~ #mouth,
#feel-1:checked ~ #face,
#feel-1:checked ~ #face:before,
#feel-1:checked ~ #face:after {
	background: #00c;
	border-color: #00c;
	color: #00c;
}

#feel-1:checked ~ #mouth {
	border-radius: 38px 38px 0 0 / 28px 28px 0 0;
	height: 16px;
	margin-top: -4px;
}

#feel-2:checked ~ label,
#feel-2:checked ~ #mouth,
#feel-2:checked ~ #face,
#feel-2:checked ~ #face:before,
#feel-2:checked ~ #face:after {
	background: #36f;
	border-color: #36f;
	color: #36f;
}

#feel-2:checked ~ #mouth {
	border-radius: 33px 33px 0 0 / 25px 25px 0 0;
	height: 13px;
	margin-top: -3px;
}

#feel-3:checked ~ label,
#feel-3:checked ~ #mouth,
#feel-3:checked ~ #face,
#feel-3:checked ~ #face:before,
#feel-3:checked ~ #face:after {
	background: #38f;
	border-color: #38f;
	color: #38f;
}

#feel-3:checked ~ #mouth {
	border-radius: 40px 40px 0 0 / 20px 20px 0 0;
	height: 10px;
	margin-top: -2px;
}

#feel-4:checked ~ label,
#feel-4:checked ~ #mouth,
#feel-4:checked ~ #face,
#feel-4:checked ~ #face:before,
#feel-4:checked ~ #face:after {
	background: #3cc;
	border-color: #3cc;
	color: #3cc;
}

#feel-4:checked ~ #mouth {
	border-radius: 20px 20px 0 0 / 11px 11px 0 0;
	height: 8px;
	margin-top: -1px;
}

#feel-5:checked ~ label,
#feel-5:checked ~ #mouth,
#feel-5:checked ~ #face,
#feel-5:checked ~ #face:before,
#feel-5:checked ~ #face:after {
	background: #3fc;
	border-color: #3fc;
	color: #3fc;
}

#feel-6:checked ~ label,
#feel-6:checked ~ #mouth,
#feel-6:checked ~ #face,
#feel-6:checked ~ #face:before,
#feel-6:checked ~ #face:after {
	background: #3f9;
	border-color: #3f9;
	color: #3f9;
}

#feel-6:checked ~ #mouth {
	border-radius: 0 0 20px 20px / 0 0 11px 11px;
	height: 8px;
	margin-top: -1px;
}

#feel-7:checked ~ label,
#feel-7:checked ~ #mouth,
#feel-7:checked ~ #face,
#feel-7:checked ~ #face:before,
#feel-7:checked ~ #face:after {
	background: #3f6;
	border-color: #3f6;
	color: #3f6;
}

#feel-7:checked ~ #mouth {
	border-radius: 0 0 40px 40px / 0 0 20px 20px;
	height: 10px;
	margin-top: -2px;
}

#feel-8:checked ~ label,
#feel-8:checked ~ #mouth,
#feel-8:checked ~ #face,
#feel-8:checked ~ #face:before,
#feel-8:checked ~ #face:after {
	background: #3f3;
	border-color: #3f3;
	color: #3f3;
}

#feel-8:checked ~ #mouth {
	border-radius: 0 0 33px 33px / 0 0 25px 25px;
	height: 13px;
	margin-top: -3px;
}

#feel-9:checked ~ label,
#feel-9:checked ~ #mouth,
#feel-9:checked ~ #face,
#feel-9:checked ~ #face:before,
#feel-9:checked ~ #face:after {
	background: #3f0;
	border-color: #3f0;
	color: #3f0;
}

#feel-9:checked ~ #mouth {
	border-radius: 0 0 38px 38px / 0 0 28px 28px;
	height: 16px;
	margin-top: -4px;
}

#feel-10:checked ~ label,
#feel-10:checked ~ #mouth,
#feel-10:checked ~ #face,
#feel-10:checked ~ #face:before,
#feel-10:checked ~ #face:after {
	background: #0c0;
	border-color: #0c0;
	color: #0c0;
}

#feel-10:checked ~ #mouth {
	border-radius: 0 0 30px 30px;
	height: 20px;
	margin-top: -5px;
}

dabblet.html

<fieldset>
	<legend>How happy are you?</legend>
	
	<div id="happiness">
		<input name="feels" id="feel-1" type="radio" value="1"> <label for="feel-1">Really unhappy</label>
		<input name="feels" id="feel-2" type="radio" value="2"> <label for="feel-2">Very unhappy</label>
		<input name="feels" id="feel-3" type="radio" value="3"> <label for="feel-3">Quite unhappy</label>
		<input name="feels" id="feel-4" type="radio" value="4"> <label for="feel-4">A little unhappy</label>
		<input name="feels" id="feel-5" type="radio" value="5"> <label for="feel-5">Ambivalent</label>
		<input name="feels" id="feel-6" type="radio" value="6"> <label for="feel-6">A little happy</label>
		<input name="feels" id="feel-7" type="radio" value="7"> <label for="feel-7">Quite happy</label>
		<input name="feels" id="feel-8" type="radio" value="8"> <label for="feel-8">Very happy</label>
		<input name="feels" id="feel-9" type="radio" value="9"> <label for="feel-9">Really happy</label>
		<input name="feels" id="feel-10" type="radio" value="10"> <label for="feel-10">Over the moon!</label>
		
		<div id="face"></div>
		<div id="mouth"></div>
	</div>

</fieldset>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}