정확히 말하면, HTML5 라기 보다는 CSS3의 효과를 이용한다는게 맞습니다만,
HTML5라는 단어가 광의적으로 사용되어서 HTML5라고 해도 크게 무리는 없습니다.

원리는 아래와 같습니다.

div의 class를 지정하고,
해당하는 class에 animation효과를 주는 방법입니다.
애니메이션을 줄 때에는 keyframe을 사용합니다.

여기 페이드인 효과 입니다.

위의 에제는 편의를 위해 무한 반복하도록 설정했습니다. (구글, 사파리와 같은 webkit계열에서만 제대로 보입니다.)

소스코드는 아래와 같이 사용하시면 됩니다.

 

먼저 CSS 부분을 선언합니다.(웹킷 기준으로 설명합니다.)

<style>
@-webkit-keyframes animationfade {
from { opacity: 0; }
to { opacity: 1; }
}

.fadein {
-webkit-keyframes: animationfade 2s;
}
</style>

사용할때는 아래와 같이 사용합니다.

<div class=”fadein”>페이드 인 효과</div>

 

다른 브라우저에서도 보려면,

-webkit- 부분을
오페라는 -o-
파이어폭스는 -moz-
와 같이 선언하시면 됩니다.

여러분도 한번 시도해 보세요. ^^