omganimations.

dabblet.css

/**
 * omganimations.
 */

.snowflakes
{
	height: 3em;
	font-size: 2em;
	width: 100%;
	background-color: #36e;
	position: relative;
	overflow: hidden;
}
.snowflakes i
{
	color: white;
	position: absolute;
	font-style: normal;
	top: -1em;
	-webkit-animation: falling 5s infinite ease-in-out;
	opacity: 0;
}

.snowflakes { width: 100%; }

.snowflakes i:nth-of-type(1) { left: 5%; }
.snowflakes i:nth-of-type(2) { left: 10%; }
.snowflakes i:nth-of-type(3) { left: 15%; }
.snowflakes i:nth-of-type(4) { left: 20%; }
.snowflakes i:nth-of-type(5) { left: 25%; }
.snowflakes i:nth-of-type(6) { left: 30%; }
.snowflakes i:nth-of-type(7) { left: 35%; }
.snowflakes i:nth-of-type(8) { left: 40%; }
.snowflakes i:nth-of-type(9) { left: 45%; }
.snowflakes i:nth-of-type(10) { left: 50%; }
.snowflakes i:nth-of-type(11) { left: 55%; }
.snowflakes i:nth-of-type(12) { left: 60%; }
.snowflakes i:nth-of-type(13) { left: 65%; }
.snowflakes i:nth-of-type(14) { left: 70%; }
.snowflakes i:nth-of-type(15) { left: 75%; }
.snowflakes i:nth-of-type(16) { left: 80%; }
.snowflakes i:nth-of-type(17) { left: 85%; }
.snowflakes i:nth-of-type(18) { left: 90%; }
.snowflakes i:nth-of-type(19) { left: 95%; }
.snowflakes i:nth-of-type(20) { left: 100%; }


.snowflakes i:nth-of-type(5n)    { font-size: 1em; }
.snowflakes i:nth-of-type(5n+1)  { font-size: 1.1em; }
.snowflakes i:nth-of-type(5n+2)  { font-size: 1.2em; }

.snowflakes i:nth-of-type(3n)    { animation-delay: 2.3s;}
.snowflakes i:nth-of-type(3n+1)  { animation-delay: 1.5s;}
.snowflakes i:nth-of-type(3n+2)  { animation-delay: 3.4s;}

.snowflakes i:nth-of-type(5n)    { animation-duration: 4s;}
.snowflakes i:nth-of-type(5n+1)  { animation-duration: 12s;}
.snowflakes i:nth-of-type(5n+2)  { animation-duration: 7s;}
.snowflakes i:nth-of-type(5n+3)  { animation-duration: 6s;}
.snowflakes i:nth-of-type(5n+4)  { animation-duration: 10s;}

.snowflakes i:nth-of-type(7n)    { opacity: 0.5;}
.snowflakes i:nth-of-type(7n+1)  { opacity: 0.8;}
.snowflakes i:nth-of-type(7n+2)  { opacity: 0.3;}

.snowflakes i:nth-of-type(11n)   { animation-timing-function: ease-in-out;}
.snowflakes i:nth-of-type(11n+1) { animation-timing-function: ease-out;}
.snowflakes i:nth-of-type(11n+2) { animation-timing-function: ease;}
.snowflakes i:nth-of-type(11n+5) { animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9);}


@-webkit-keyframes falling {
  from {
  	-webkit-transform: translateY(0em) rotate(36deg) scale(0.9, 0.9);
  	opacity: 0.9;
  }
  50% {
  	-webkit-transform: translateY(3em) rotate(360deg) scale(1.1, 1.1);
  	opacity: 0.5;
  }
  to
  {
    -webkit-transform: translateY(3em) rotate(360deg) scale(1.1, 1.1);
  	opacity: 0;
  }
}


[src="http://www.emoji-cheat-sheet.com/graphics/emojis/cat.png"] { -webkit-animation: wiggle 5s infinite ease-in-out; }
@-webkit-keyframes wiggle
{
	from, to { -webkit-transform: rotate(30deg);  }
	25%      { -webkit-transform: rotate(0deg) scale(1.5); }
	50%      { -webkit-transform: rotate(-30deg); }
	75%      { -webkit-transform: rotate(0deg) scale(1.5);   }
}

dabblet.html

omgsnow.
<div class=snowflakes>
  <i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i>
  <i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i><i>❄</i>
</div>

<!--
omgcat
<img src="http://www.emoji-cheat-sheet.com/graphics/emojis/cat.png">
-->

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}