An animated effect for headings. The h1 tag slowly submerges on page load, while the paragraph text fades in. Super stylish with a background-image.

The HTML

<div class="fling-submerge">
<h1>Good Grief!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras augue risus, sodales a rutrum a, ullamcorper quis sem. Ut ac mattis lectus. Pellentesque pharetra cursus sapien, vitae rhoncus tortor porttitor in. Aenean lorem odio, semper ut elit at, mattis feugiat orci. Etiam vehicula blandit dignissim. Aliquam rutrum sed est nec mollis.</p>
</div>

The CSS

@-webkit-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-moz-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-ms-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-o-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}

@-webkit-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-moz-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-ms-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-o-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}

.fling-submerge {display:block;}
.fling-submerge h1 {font-size: 40px; line-height: 50px;position: relative; opacity: 1; top:0;
    -webkit-animation: fling-submerge 2s ease-out; -moz-animation: fling-submerge 2s ease-out; -ms-animation: fling-submerge 2s ease-out; -o-animation: fling-submerge 2s ease-out; animation: fling-submerge 2s ease-out;}
.fling-submerge p {font-size: 18px; line-height: 22px;opacity: 1;
    -webkit-animation: fling-psubmerge 3s; -moz-animation: fling-psubmerge 3s; -ms-animation: fling-psubmerge 3s; -o-animation: fling-psubmerge 3s; animation: fling-psubmerge 3s;}

The End Result