Webplatform example for http://docs.webplatform.org/wiki/css/properties/animation-name,

dabblet.css

/*
 * Webplatform example for http://docs.webplatform.org/wiki/css/properties/animation-name,
   amimation-duration, animation-iteration-count, animation-direction
 */
 
div {
    width: 5em;
    height: 5em;
    margin: 20px;
    background: blue;
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-direction: normal;
    -webkit-animation-direction: reverse;
}

@-webkit-keyframes pulse {
    from { 
        transform : translate3d(100px,0px,0px);
    }
    50% { 
        transform : translate3d(200px,0px,0px);
    }
    to { 
         transform : translate3d(0px,0px,0px);
    }
}

dabblet.html

<div class="selected"></div>

<p>This example shows how to use CSS animations to "pulse" an element
  on the page.</p>

dabblet.js

console && console.log("Web Platform Docs example");

settings.json

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