A CodePen by movibe. Effeckt.css

index.html

<h1>
  <span>E</span>
  <span>f</span>
  <span>f</span>
  <span>e</span>
  <span>c</span>
  <span>k</span>
  <span>t</span>
  <span>.css</span>
</h1>
<subhead>UI-Less & Performant Transitions & Animations</subhead>

<p><a href="https://github.com/h5bp/lazyweb-requests/issues/122" target="_blank">Conversation started here.</a> Fundamentals: no hover, 60fps, </p>

<!-- modal windows -->
<div class="effeckt">
[[[http://codepen.io/chriscoyier/pen/EGbxc]]]
</div> 

<!-- more modal windows -->
<div class="effeckt">
[[[http://codepen.io/chriscoyier/pen/rGifg]]]
</div>

<!-- buttons -->
<div class="effeckt">
[[[http://codepen.io/chriscoyier/pen/fAsvg]]]
</div>

<!-- page transitions -->
<div class="effeckt"> [[[http://codepen.io/chriscoyier/pen/qiItp]]]
</div>

script.js

/*
  JS gets included from the individual demos
*/

style.css

/*
  CSS gets included from individual demos
*/

@import url(http://fonts.googleapis.com/css?family=Kite+One);

* { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #900;
  text-decoration: none;
}
a:hover, a:active {
  color: red;
}
body {
  background: #eee;
  font-family: 'Kite One', sans-serif;
  padding: 1rem;
} 
subhead {
  font-size: 1.4rem;
}
.effeckt {
  padding: 1rem;
  background: white;
  margin: 0 1rem 1rem 0;
}
h1 {
  font-size: 0;
  margin: 0 0 0.5rem;
}
h1 span {
  font-size: 3rem;
  position: relative;
  display: inline-block;
  opacity: 0;
}
h2 {
  border-bottom: 2px solid #eee;
}
h2 a {
  font-size: 1rem;  
}
h1 span:nth-child(1) {
  -webkit-animation: logo-from-horz 0.5s ease forwards; 
  -moz-animation: logo-from-horz 0.5s ease forwards; 
  -ms-animation: logo-from-horz 0.5s ease forwards; 
  animation: logo-from-horz 0.5s ease forwards; 
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
}
h1 span:nth-child(2) {
  -webkit-animation: logo-from-vert 0.5s ease forwards;
  -moz-animation: logo-from-vert 0.5s ease forwards;
  -ms-animation: logo-from-vert 0.5s ease forwards;
  animation: logo-from-vert 0.5s ease forwards;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
}
h1 span:nth-child(3) {
  -webkit-animation: logo-from-vert 0.5s ease forwards;
  -moz-animation: logo-from-vert 0.5s ease forwards;
  -ms-animation: logo-from-vert 0.5s ease forwards;
  animation: logo-from-vert 0.5s ease forwards;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
}
h1 span:nth-child(4) {
  -webkit-animation: logo-from-horz 0.3s ease forwards;
  -moz-animation: logo-from-horz 0.3s ease forwards;
  -ms-animation: logo-from-horz 0.3s ease forwards;
  animation: logo-from-horz 0.3s ease forwards;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
}
h1 span:nth-child(5) {
  -webkit-animation: logo-from-horz 0.3s ease forwards;
  -moz-animation: logo-from-horz 0.3s ease forwards;
  -ms-animation: logo-from-horz 0.3s ease forwards;
  animation: logo-from-horz 0.3s ease forwards;
  -webkit-transform: translateX(-50px); 
  -moz-transform: translateX(-50px); 
  -ms-transform: translateX(-50px); 
  transform: translateX(-50px); 
}
h1 span:nth-child(6) { 
  -webkit-animation: logo-from-horz 0.3s ease forwards;
  -moz-animation: logo-from-horz 0.3s ease forwards;
  -ms-animation: logo-from-horz 0.3s ease forwards;
  animation: logo-from-horz 0.3s ease forwards;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px);
}
h1 span:nth-child(7) {
  -webkit-animation: logo-from-vert 0.3s ease forwards;
  -moz-animation: logo-from-vert 0.3s ease forwards;
  -ms-animation: logo-from-vert 0.3s ease forwards;
  animation: logo-from-vert 0.3s ease forwards;
  -webkit-transform: translateX(-50px);
  -moz-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
}
h1 span:nth-child(8) {
  -webkit-animation: logo-from-vert 0.2s 0.5s ease forwards;
  -moz-animation: logo-from-vert 0.2s 0.5s ease forwards;
  -ms-animation: logo-from-vert 0.2s 0.5s ease forwards;
  animation: logo-from-vert 0.2s 0.5s ease forwards;
  -webkit-transform: translateX(1000px);
  -moz-transform: translateX(1000px);
  -ms-transform: translateX(1000px);
  transform: translateX(1000px);
}
@-webkit-keyframes logo-from-horz {
  100% { -webkit-transform: translateX(0); opacity: 1; }
}
@-webkit-keyframes logo-from-vert {
  100% { -webkit-transform: translateY(0); opacity: 1;}
}
@-moz-keyframes logo-from-horz {
  100% { -moz-transform: translateX(0); opacity: 1; }
}
@-moz-keyframes logo-from-vert {
  100% { -moz-transform: translateY(0); opacity: 1;}
}
@-ms-keyframes logo-from-horz {
  100% { -ms-transform: translateX(0); opacity: 1; }
}
@-ms-keyframes logo-from-vert {
  100% { -ms-transform: translateY(0); opacity: 1;}
}
@keyframes logo-from-horz {
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes logo-from-vert {
  100% { transform: translateY(0); opacity: 1;}
}