css3 keyframes ease in box then ease out.

by Ken Watanabe

HTML

<body>
    <div class="pagewrap">
        <div class="wrapper">
            <div class="headline">
                <div class="top-headline-pad"></div>
                <div class="row01 flow right sequence01">ROW 01</div>
                <div class="headline-pad"></div>
                <div class="row02 flow down sequence02">ROW 02</div>
                <div class="headline-pad"></div>
                <div class="row03 flow up sequence03">ROW 03</div>
                <div class="bottom-headline-pad"></div>
            </div>
        </div>
    </div>
</body>

CSS

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.fade {
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@-webkit-keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@-webkit-keyframes flowup {
    0% {
        opacity: 0;
        top: 100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes flowup {
    0% {
        opacity: 0;
        top: 100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@-webkit-keyframes flowdown {
    0% {
        opacity: 0;
        top: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes flowdown {
    0% {
        opacity: 0;
        top: -100px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
.flow {
   ...