Animated Themery Logo

dabblet.css

/**
 * Animated Themery Logo
 * http://themery.com
 *
 * Note: We used The Compass Animation gem to generate the CSS.
 * https://github.com/ericam/compass-animation
 */

/* Keyframes
------------------------------------------------------------------------------*/
@keyframes rotate {
    0% { transform: rotateZ(0); }
  100% { transform: rotateZ(360deg); }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-80px);
   }
  100% {
    opacity: 1;
    transform: translateX(0);
   }
}

/* Reset
------------------------------------------------------------------------------*/
html {
  min-height: 100%;
}
body {
  background: #111;
  color: #fff;
  font-family: "Helvetica Neue", sans-serif;
  margin: 50px auto 0 auto;
  padding: 2em;
}

/* Animation stuff
------------------------------------------------------------------------------*/
img {
  float: left;
  margin-right: 1em;
  animation: rotate linear 2s 1s 1;
}
h1 {
  animation: slide-in ease-in 2s 1s 1;
  font-weight: 300;
  line-height: 70px;
  margin: 0;
}
h1, img {
  animation-fill-mode: both;
  transform: translate3d(0,0,0);
}

dabblet.html

<img src="http://dl.dropbox.com/u/912092/themery.png" alt="Themery logo">
<h1>Themery</h1>

settings.json

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