Untitled

dabblet.css

.pulse, .btn:hover {
	-webkit-animation-name: tada;
	-moz-animation-name: tada;
	-o-animation-name: tada;
	animation-name: tada;
}

.tada, .btn:active {
	-webkit-animation-name: tada;
	-moz-animation-name: tada;
	-o-animation-name: tada;
	animation-name: tada;
}

.freakthefuckout, body:active{
	-webkit-animation-name: -webkit-freakthefuckout;
	-moz-animation-name: -moz-freakthefuckout;
	-o-animation-name: -o-freakthefuckout;
	animation-name: freakthefuckout;
}
body{
animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
.animated,body {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }	
	50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }	
	50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }	
	50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }	
	50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



@-webkit-keyframes tada {
	0% {-webkit-transform: scale(1);}	
	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
	100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
	0% {-moz-transform: scale(1);}	
	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
	100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
	0% {-o-transform: scale(1);}	
	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
	100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
	0% {transform: scale(1);}	
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);}
}

@-webkit-keyframes freakthefuckout {
    14.25% { background-color:red; }	
    28.5% { background-color:orange; }
    42.75% { background-color:yellow; }
    57% { background-color:green; }
    71.25% { background-color:blue; }
    85.5% { background-color:#4B0082; }
    100% { background-color:violet; }
}
@-moz-keyframes freakthefuckout {
    14.25% { background-color:red; }	
    28.5% { background-color:orange; }
    42.75% { background-color:yellow; }
    57% { background-color:green; }
    71.25% { background-color:blue; }
    85.5% { background-color:#4B0082; }
    100% { background-color:violet; }
}
@-o-keyframes freakthefuckout {
    14.25% { background-color:red; }	
    28.5% { background-color:orange; }
    42.75% { background-color:yellow; }
    57% { background-color:green; }
    71.25% { background-color:blue; }
    85.5% { background-color:#4B0082; }
    100% { background-color:violet; }
}
@keyframes freakthefuckout {
    14.25% { background-color:red; }	
    28.5% { background-color:orange; }
    42.75% { background-color:yellow; }
    57% { background-color:green; }
    71.25% { background-color:blue; }
    85.5% { background-color:#4B0082; }
    100% { background-color:violet; }
}

dabblet.html

<button id="button" class="btn animated" type="button">Drink Me</button>

settings.json

{"view":"separate","fontsize":"80","seethrough":"1","prefixfree":"1","page":"all"}