FADE IN

dabblet.css

.square {
	width: 100px;
	height: 100px;
	background: red;
	margin: 5px;
}

.animated {
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}
         
/* FADE IN */

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

/* SCALE UP */

@-webkit-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@-moz-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@-o-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

.scaleUp {
	-webkit-animation-name: scaleUp;
	-moz-animation-name: scaleUp;
	-o-animation-name: scaleUp;
	animation-name: scaleUp;
}

/*       */

@-webkit-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@-moz-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@-o-keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

@keyframes scaleUp {
	0% {transform: scale(1, 1);}	
	100% {transform: scale(2, 2);}
}

.scaleUp {
	-webkit-animation-name: scaleUp;
	-moz-animation-name: scaleUp;
	-o-animation-name: scaleUp;
	animation-name: scaleUp;
}

dabblet.html

<div class="square animated fadeIn"></div>
<div class="square animated scaleUp"></div>
<div class="square animated fadeIn scaleUp"></div>

dabblet.js

// alert('Hello world!');

settings.json

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