Take the 2-minute tour ×

I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.

I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:


share|improve this question

1 Answer 1

up vote 5 down vote accepted

It's done using CSS animations. When looking at the source, you'll find this line of code:

.sup {
    animation:sup 1.8s backwards;
@keyframes sup {
    0% {
    30% {
    100% {

It'll fade in the text (using opacity) and move it up using translateY .

JSFiddle example.

Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.

share|improve this answer
Thank You so much :D –  Siddharth Gupta Feb 26 '13 at 8:38
No problem - glad to help you out. Don't forget to accept this answer if it satisfied your needs. –  MarcoK Feb 26 '13 at 8:40

Your Answer


