아직 표준화가 완성되진 않았지만 HTML5는 차세대 HTML 표준으로 많은 웹브라우저에서 지원하고 있습니다. 이번에는 HTML5의 새로운 CSS를 이용한 페이드인 애니메이션 효과에 대해 알아보도록 합니다.
페이드인(fadein)이란?
- 처음에는 화면에 나타나지 않다가 시간이 지남에 따라 서서히 그 모습을 들어내는 효과를 말합니다.
- 페이드아웃과 함께 쓰이는 용어로 페이드아웃은 페이드인과 반대로 서서히 사라지는 효과를 말합니다.
- 두 장의 그림을 사용할 경우 하나는 서서히 나타나고 다른 하나는 서서히 사라지게 하여 멋진 효과를 만들 수 있습니다.
HTML5에서는 다음과 같은 문법으로 애니메이션 효과를 만들 수 있습니다.
@-웹브라우저의기반-keyframes 이름 { from{ /*애니메이션이 시작될 때 설정될 값들*/} to { /*애니메이션의 끝에 설정될 값들*/} }
세상에는 크롬, 사파리, 파이어폭스, 인터넷익스플로러 등 다양한 웹브라우저가 존재합니다. 현재는 각 브라우저마다 애니메이션 설정을 따로 해줘야 하는 불편함이 있습니다. 위에서 “웹브라우저의기반” 부분에 moz나 webkit을 적습니다. 사실 모든 브라우저를 지원하면 좋기 때문에 두 개 다 작성해 주는 것이 좋습니다. 그리고 from에서 부터 to까지 변경될 속성값들을 적어줍니다. 지금은 페이드인 효과를 만들기 때문에 opacity(투명도)값만 설정해 봅니다. to 값을 적어주지 않으면 from값 이전에 설정된 값으로 자동 설정되기 때문에 궂이 적어주지 않아도 됩니다. 페이드인 효과를 만들면 아래와 같습니다.
<style>
@-moz-keyframes ani_fadein { from { opacity: 0; } to { } }
@-webkit-keyframes ani_fadein { from { opacity: 0; } to { } }
.fadein { -webkit-animation: ani_fadein 1.5s; -moz-animation: ani_fadein 1.5s;}
</style>
실제 애니메이션을 사용할 경우에는 기존의 스타일 내에 다음과 같은 형식으로 애니메이션을 적용시킬 수 있습니다.
-웹브라우저의기반-animation: 애니메이션이름 시간
<div class=”fadein”>내용…</div>
그리고 기존에 사용하던 스타일처럼 id나, class로 구분하여 해당 스타일을 HTML 요소에 적용시켜 주면 됩니다.