The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
   transition-duration: 1s, 1s;  transition-delay: 0s, 1s;
 */
body {font-family:Arial;font-size:11px;  }

 p.rojo {position:absolute;left:40px;top:100px;width:40px; height:40px;background-color:red; 
 		-webkit-animation: rojo 5s infinite; animation: rojo 5s infinite; }
 
 p.azul {width:40px;height:40px;background-color:blue;position:absolute;left:40px;top:60px;}
 
 p.verde {width:40px; height:40px; background-color:green; position:absolute; top:100px;left:80px;}
 
 @-webkit-keyframes rojo {
    0%   {background: red;transform: rotateX(180deg); transform-style: preserve-3d;}    
    25%  {background: yellow;}    
    50%  {background: blue;}    
    100% {background: green;}
    }

dabblet.html

<p class="rojo"></p>
<p class="verde"></p>
<p class="azul"></p>

dabblet.js

// alert('Hello world!');

settings.json

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