HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en"> 
<head>
<title> CSS play | HTML5 and CSS3 | Cat Meowwww! </title>
<meta charset="utf-8">
</head>

<body>
<h1>Meowww!</h1>
<div class="cat">
	<div class="head"></div>
	<div class="body"></div>
	<div class="left-leg"></div>
	<div class="right-leg"></div>
	<div class="left-foot"></div>
	<div class="right-foot"></div>
	<div class="left-ear"></div>
	<div class="right-ear"></div>
	<div class="left-whiskers">
		<div class="w1"></div>
		<div class="w3"></div>
		<div class="w5"></div>
	</div>
	<div class="right-whiskers">
		<div class="w2"></div>
		<div class="w4"></div>
		<div class="w6"></div>
	</div>
	<div class="left-eye"><div class="left-pupil"></div></div>
	<div class="right-eye"><div class="right-pupil"></div></div>
	<div class="tail"></div>
	<div class="mouth">
		<div class="tooth-tl"></div>
		<div class="tooth-tr"></div>
		<div class="tooth-bl"></div>
		<div class="tooth-br"></div>
		<div class="throat">
			<div class="uvula"></div>
		</div>
		<div class="tongue"></div>
	</div>
</div>
<p>A meowwww! using no graphics, no javascript, just CSS<br> 
Compatible with Mozilla Firefox (5), Safari and Chrome<br>
(It's a pity that CSS/keyframes cannot trigger sound effects)</p>
  <p>&copy; Stu Nicholls - <a href="http://www.cssplay.co.uk">CSS play</a></p>
</body>
</html>

h1 {text-align:center; font:normal 40px/50px georgia, serif; padding:0 margin:0;}
p {text-align:center; font:normal 14px/30px georgia, serif; padding:0 margin:0;}

.cat {width:400px; height:400px; position:relative; background:#fff; margin:0 auto;}
.head {width:280px; height:250px; background:#000; position:absolute; left:60px; top:30px; 
border-radius: 280px/250px;}

.body {width:66px; height:125px; background:#000; position:absolute; left:165px; top:250px; 
border-radius: 66px/125px;
}
.left-leg {width:25px; height:60px; background:#000; position:absolute; left:207px; top:327px; 
border-radius: 25px/60px;
transform:rotate(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
}
.right-leg {width:25px; height:60px; background:#000; position:absolute; left:163px; top:327px; 
border-radius: 25px/60px;
transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
}
.left-foot {width:15px; height:35px; background:#000; position:absolute; left:205px; top:350px; 
border-radius: 16px/35px;
}
.right-foot {width:15px; height:35px; background:#000; position:absolute; left:180px; top:350px; 
border-radius: 15px/35px;
}
.left-ear {width:30px; height:60px; background:#000; position:absolute; left:300px; top:40px; 
border-radius: 30px/60px;
-moz-transform-origin: 15px 60px;
-webkit-transform-origin: 15px 60px;
-moz-animation: left-ear 3s infinite linear normal none;
-webkit-animation: left-ear 3s infinite linear normal none;
}
.right-ear {width:30px; height:60px; background:#000; position:absolute; left:70px; top:40px; 
border-radius: 30px/60px;
-moz-transform-origin: 15px 60px;
-webkit-transform-origin: 15px 60px;
-moz-animation: right-ear 3s infinite linear normal none;
-webkit-animation: right-ear 3s infinite linear normal none;
}
.left-whiskers {width:45px; height:30px; position:absolute; left:330px; top:140px;
-moz-transform-origin: 0px 15px;
-webkit-transform-origin: 0px 15px;
-moz-animation: left-whiskers 3s infinite linear normal none;
-webkit-animation: left-whiskers 3s infinite linear normal none;
}
.w1 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:15px;} 
.w3 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:8px;
transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
} 
.w5 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:22px;
transform:rotate(-355deg);
-ms-transform:rotate(-355deg);
-o-transform:rotate(-355deg);
-moz-transform:rotate(-355deg);
-webkit-transform:rotate(-355deg);
} 
.right-whiskers {width:45px; height:30px; position:absolute; left:25px; top:140px;
-moz-transform-origin: 45px 15px;
-webkit-transform-origin: 45px 15px;
-moz-animation: right-whiskers 3s infinite linear normal none;
-webkit-animation: right-whiskers 3s infinite linear normal none;
}
.w2 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:15px;} 
.w4 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:8px;
transform:rotate(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.w6 {width:45px; height:3px; background:#000; position:absolute; left:0px; top:22px;
transform:rotate(355deg);
-ms-transform:rotate(355deg);
-o-transform:rotate(355deg);
-moz-transform:rotate(355deg);
-webkit-transform:rotate(355deg);
} 
.left-eye {width:48px; height:48px; background:#fff; position:absolute; left:271px; top:95px; 
border-radius: 48px;
-moz-animation: left-eye 3s infinite linear normal none;
-webkit-animation: left-eye 3s infinite linear normal none;
}
.right-eye {width:48px; height:48px; background:#fff; position:absolute; left:81px; top:95px; 
border-radius: 48px;
-moz-animation: right-eye 3s infinite linear normal none;
-webkit-animation: right-eye 3s infinite linear normal none;
}
.left-pupil {width:15px; height:15px; background:#000; position:absolute; left:17px; top:15px; 
border-radius: 15px;
-moz-animation: left-pupil 3s infinite linear normal none;
-webkit-animation: left-pupil 3s infinite linear normal none;
}
.right-pupil {width:15px; height:15px; background:#000; position:absolute; left:17px; top:15px; 
border-radius: 15px;
-moz-animation: right-pupil 3s infinite linear normal none;
-webkit-animation: right-pupil 3s infinite linear normal none;
}
.tail {width:85px; height:70px; background:transparent; border:5px solid #000; border-width:0 5px 5px 0; position:absolute; left:200px; top:290px;
border-radius: 85px/70px;
}

.mouth {width:190px; height:190px; background:#900; border:1px solid #600; position:absolute; top:245px; width:16px; height:5px; left: 192px; opacity:0; 
border-radius: 16px/5px;
-moz-animation: mouth 3s infinite linear normal none;
-webkit-animation: mouth 3s infinite linear normal none;
}
.tooth-tl {width:0; height:0; border-left:10px solid #fff; border-top:8px solid transparent; border-bottom:12px solid transparent; position:absolute; left:50%; margin-left:5px; top:2px; -moz-transform: scale(0);
-moz-animation: tooth-tl 3s infinite linear normal none;
-webkit-animation: tooth-tl 3s infinite linear normal none;
}
.tooth-tr {width:0; height:0; border-right:10px solid #fff; border-top:8px solid transparent; border-bottom:12px solid transparent; position:absolute; left:50%; margin-left:-15px; top:2px; -moz-transform: scale(0);
-moz-animation: tooth-tr 3s infinite linear normal none;
-webkit-animation: tooth-tr 3s infinite linear normal none;
}
.tooth-bl {width:0; height:0; border-left:10px solid #fff; border-top:12px solid transparent; border-bottom:8px solid transparent; position:absolute; left:50%; margin-left:5px; bottom:2px; -moz-transform: scale(0);
-moz-animation: tooth-bl 3s infinite linear normal none;
-webkit-animation: tooth-bl 3s infinite linear normal none;
}
.tooth-br {width:0; height:0; border-right:10px solid #fff; border-top:12px solid transparent; border-bottom:8px solid transparent; position:absolute; left:50%; margin-left:-15px; bottom:2px; -moz-transform: scale(0);
-moz-animation: tooth-br 3s infinite linear normal none;
-webkit-animation: tooth-br 3s infinite linear normal none;
}
.tongue {width:80px; height:30px; background:#f66; position:absolute; left:50%; margin-left:-40px; bottom:-8px; -moz-transform: scale(0);
border-radius: 80px/30px;
-moz-animation:tongue 3s infinite linear normal none;
-webkit-animation:tongue 3s infinite linear normal none;
}
.throat {width:50px; height:70px; background:#300; position:absolute; left:50%; margin-left:-25px; bottom:-70px; -moz-transform: scale(0);
border-radius: 60px 60px 0 0;
-moz-animation: throat 3s infinite linear normal none;
-webkit-animation: throat 3s infinite linear normal none;
}
.uvula {width:10px; height:50px; background:#900; position:absolute; left:50%; margin-left:-5px; top:-20px; -moz-transform: scale(1);
-moz-transform-origin: 5px 0px;
-webkit-transform-origin: 5px 0px;
border-radius: 10px/50px;
-moz-animation: uvula 0.1s 2s infinite linear normal none;
-webkit-animation: uvula 0.1s 2s infinite linear normal none;
}

@-moz-keyframes left-ear {
0% {left:300px; top:40px; -moz-transform:rotate(0deg);}
40% {left:300px; top:40px; -moz-transform:rotate(0deg);}
42% {left:302px; top:50px; -moz-transform:rotate(30deg);}
44% {left:304px; top:60px; -moz-transform:rotate(60deg);}
46% {left:306px; top:70px; -moz-transform:rotate(90deg);}
48% {left:310px; top:80px; -moz-transform:rotate(120deg);}
50% {left:315px; top:90px; -moz-transform:rotate(150deg);}
80% {left:315px; top:90px; -moz-transform:rotate(150deg);}
82% {left:310px; top:80px; -moz-transform:rotate(120deg);}
84% {left:306px; top:70px; -moz-transform:rotate(90deg);}
86% {left:304px; top:60px; -moz-transform:rotate(60deg);}
88% {left:302px; top:50px; -moz-transform:rotate(30deg);}
100% {left:300px; top:40px; -moz-transform:rotate(0deg);}
}
@-moz-keyframes right-ear {
0% {left:70px; top:40px; -moz-transform:rotate(0deg);}
40% {left:70px; top:40px; -moz-transform:rotate(0deg);}
42% {left:68px; top:50px; -moz-transform:rotate(-30deg);}
44% {left:66px; top:60px; -moz-transform:rotate(-60deg);}
46% {left:64px; top:70px; -moz-transform:rotate(-90deg);}
48% {left:60px; top:80px; -moz-transform:rotate(-120deg);}
50% {left:55px; top:90px; -moz-transform:rotate(-150deg);}
80% {left:55px; top:90px; -moz-transform:rotate(-150deg);}
82% {left:60px; top:80px; -moz-transform:rotate(-120deg);}
84% {left:64px; top:70px; -moz-transform:rotate(-90deg);}
86% {left:66px; top:60px; -moz-transform:rotate(-60deg);}
88% {left:68px; top:50px; -moz-transform:rotate(-30deg);}
100% {left:70px; top:40px; -moz-transform:rotate(-0deg);}
}

@-moz-keyframes left-whiskers {
0% {left:330px; top:140px; -moz-transform:rotate(0deg);}
40% {left:330px; top:140px; -moz-transform:rotate(0deg);}
42% {left:320px; top:120px; -moz-transform:rotate(-10deg);}
44% {left:310px; top:100px; -moz-transform:rotate(-20deg);}
46% {left:300px; top:80px; -moz-transform:rotate(-30deg);}
48% {left:280px; top:60px; -moz-transform:rotate(-40deg);}
50% {left:265px; top:50px; -moz-transform:rotate(-50deg);}
80% {left:265px; top:50px; -moz-transform:rotate(-50deg);}
82% {left:280px; top:60px; -moz-transform:rotate(-40deg);}
84% {left:300px; top:80px; -moz-transform:rotate(-30deg);}
86% {left:310px; top:100px; -moz-transform:rotate(-20deg);}
88% {left:320px; top:120px; -moz-transform:rotate(-10deg);}
100% {left:330px; top:140px; -moz-transform:rotate(0deg);}
}

@-moz-keyframes right-whiskers {
0% {left:25px; top:140px; -moz-transform:rotate(0deg);}
40% {left:25px; top:140px; -moz-transform:rotate(0deg);}
42% {left:35px; top:120px; -moz-transform:rotate(10deg);}
44% {left:45px; top:100px; -moz-transform:rotate(20deg);}
46% {left:55px; top:80px; -moz-transform:rotate(30deg);}
48% {left:75px; top:60px; -moz-transform:rotate(40deg);}
50% {left:90px; top:50px; -moz-transform:rotate(50deg);}
80% {left:90px; top:50px; -moz-transform:rotate(50deg);}
82% {left:75px; top:60px; -moz-transform:rotate(40deg);}
84% {left:55px; top:80px; -moz-transform:rotate(30deg);}
86% {left:45px; top:100px; -moz-transform:rotate(20deg);}
88% {left:35px; top:120px; -moz-transform:rotate(10deg);}
100% {left:25px; top:140px; -moz-transform:rotate(0deg);}
}

@-moz-keyframes left-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-moz-keyframes right-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-moz-keyframes left-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-moz-keyframes right-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-moz-keyframes mouth {
0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
}
@-moz-keyframes tooth-tl {
0% {margin-left:5px; top:0px; -moz-transform: scale(0);}
55% {margin-left:5px; top:0px; -moz-transform: scale(0);}
60% {margin-left:45px; top:2px; -moz-transform: scale(1);}
85% {margin-left:45px; top:2px; -moz-transform: scale(1);}
99% {margin-left:5px; top:0px; -moz-transform: scale(0);}
100% {margin-left:5px; top:2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-tr {
0% {margin-left:-15px; top:0px; -moz-transform: scale(0);}
55% {margin-left:-15px; top:0px; -moz-transform: scale(0);}
60% {margin-left:-55px; top:2px; -moz-transform: scale(1);}
85% {margin-left:-55px; top:2px; -moz-transform: scale(1);}
99% {margin-left:-15px; top:0px; -moz-transform: scale(0);}
100% {margin-left:-15px; top:2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-bl {
0% {margin-left:5px; bottom:0px; -moz-transform: scale(0);}
55% {margin-left:5px; bottom:0px; -moz-transform: scale(0);}
60% {margin-left:45px; bottom:2px; -moz-transform: scale(1);}
85% {margin-left:45px; bottom:2px; -moz-transform: scale(1);}
99% {margin-left:5px; bottom:0px; -moz-transform: scale(0);}
100% {margin-left:5px; bottom:2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-br {
0% {margin-left:-15px; bottom:0px; -moz-transform: scale(0);}
55% {margin-left:-15px; bottom:0px; -moz-transform: scale(0);}
60% {margin-left:-55px; bottom:2px; -moz-transform: scale(1);}
85% {margin-left:-55px; bottom:2px; -moz-transform: scale(1);}
99% {margin-left:-15px; bottom:0px; -moz-transform: scale(0);}
100% {margin-left:-15px; bottom:2px; -moz-transform: scale(0);}
}
@-moz-keyframes throat {
0% {bottom:-70px; -moz-transform: scale(0);}
40% {bottom:-70px; -moz-transform: scale(0);}
55% {bottom:-50px; -moz-transform: scale(0.1);}
60% {bottom:0; -moz-transform: scale(1);}
85% {bottom:0; -moz-transform: scale(1);}
99% {bottom:-30px; -moz-transform: scale(0.1);}
100% {bottom:-70px; -moz-transform: scale(0);}
}
@-moz-keyframes tongue {
0% {-moz-transform: scale(0);}
40% {-moz-transform: scale(0);}
55% {-moz-transform: scale(0.1);}
60% {-moz-transform: scale(1);}
85% {-moz-transform: scale(1);}
99% {-moz-transform: scale(0.1);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes uvula {
0% {-moz-transform:rotate(0deg);}
25% {-moz-transform:rotate(5deg);}
50% {-moz-transform:rotate(0deg);}
75% {-moz-transform:rotate(-5deg);}
100% {-moz-transform:rotate(0deg);}
}

/* Safrai and Chrome */
@-webkit-keyframes left-ear {
0% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
44% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
46% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
48% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
50% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
80% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
82% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
84% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
86% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
88% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
100% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes right-ear {
0% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);}
}

@-webkit-keyframes left-whiskers {
0% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
100% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
}

@-webkit-keyframes right-whiskers {
0% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
44% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
46% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
48% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
50% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
80% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
82% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
84% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
86% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
88% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
100% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
}

@-webkit-keyframes left-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-webkit-keyframes right-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-webkit-keyframes left-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-webkit-keyframes right-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-webkit-keyframes mouth {
0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
}
@-webkit-keyframes tooth-tl {
0% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; top:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-tr {
0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-bl {
0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-br {
0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes throat {
0% {bottom:-70px; -webkit-transform: scale(0);}
40% {bottom:-70px; -webkit-transform: scale(0);}
55% {bottom:-50px; -webkit-transform: scale(0.1);}
60% {bottom:0; -webkit-transform: scale(1);}
85% {bottom:0; -webkit-transform: scale(1);}
99% {bottom:-30px; -webkit-transform: scale(0.1);}
100% {bottom:-70px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tongue {
0% {-webkit-transform: scale(0);}
40% {-webkit-transform: scale(0);}
55% {-webkit-transform: scale(0.1);}
60% {-webkit-transform: scale(1);}
85% {-webkit-transform: scale(1);}
99% {-webkit-transform: scale(0.1);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes uvula {
0% {-webkit-transform:rotate(0deg);}
25% {-webkit-transform:rotate(5deg);}
50% {-webkit-transform:rotate(0deg);}
75% {-webkit-transform:rotate(-5deg);}
100% {-webkit-transform:rotate(0deg);}
}

Check out our Python playground!