The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

.button {
	background: #f06;	
	padding: 20px;
}

.bg-trans:hover {
	background: yellow;
}

.bg-trans {
	transition:background .5s ease-in-out;
}

.bg-anim {
 	animation: flashBg 3.5s infinite ease-in-out;
 }
 
 .blink {
 	animation: blink 3.5s infinite ease-in-out; 
 }

.off-1 {
	animation-delay: 200ms;
}

.off-2 {
	animation-delay: 400ms;
}

.slide-shine {
	display:inline;
	position:relative;
}

.slide-shine:after {
	content: "";
	width: 25%;
	background: linear-gradient(to right, rgba(255,255,255, 0.4) 10%, rgba(255,255,255,.8) 50%, rgba(255,255,255, 0.4) 90%);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	
	animation: slide 3s infinite alternate ease-in;
}

.shrink-up {
	animation: shrink-up 1s infinite alternate ease-in;
	overflow: hidden;
}

@keyframes slide {
	0% {
		left; 0;
	}
	100% {
		left: 100%
	}
}

@keyframes flashBg {
    from, 50%, to {  
       background: #f06;    
    }    
    25%, 75% {        
    	background: yellow;    
    }      
}

@keyframes blink {  
	0%, 50%, 
	100% {         
	  opacity: 0;
	}        
	25%, 75% {            	
	  opacity: 1;        
	}      
}


@keyframes shrink-up {    
	100% {
		height: 0;
	}
}

dabblet.html

<button class="button bg-trans">Missa Button</button>
<button class="button bg-anim">Missa Button</button>
<p class="blink">processing</p>
<p >processing<span class="blink">...</span></p>
<p >processing<span class="blink">.</span><span class="blink off-1">.</span><span class="blink off-2">.</span></p>
<p class="slide-shine">shine proccessing...</p>
<p>shine proccessing<span class="slide-shine">...</span></p>
<p class="shrink-up">shrink up</p>

dabblet.js

// alert('Hello world!');

settings.json

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