CSS3 Animation Test

dabblet.css

/**
 * CSS3 Animation Test
 */

body {
  padding: 20px;
}

* {
  background-color: #111;
  font: bold 40px Helvetica;
  text-rendering: optimizeLegibility;
}

.animated span {
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
}

.second1 {
  -webkit-animation-delay: 0s;
  -webkit-animation-name: highlight;
}

.second2 {
  -webkit-animation-delay: 1s;
  -webkit-animation-name: highlight;
}

.second3 {
  -webkit-animation-delay: 2s;
  -webkit-animation-name: highlight;
}

.second4 {
  -webkit-animation-delay: 3s;
  -webkit-animation-name: highlight;
}

@-webkit-keyframes highlight {
    0%, 100%        { color: #f33; }
    10%, 50%, 90%   { color: #666; }
}

dabblet.html

<div class="animated">
  <span class="second1">One</span>
  <span class="second2">Two</span>
  <span class="second3">Three</span>
  <span class="second4">Four</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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