CSS Transition를 이용한 버튼 애니메이션 효과
HTML5가 나오면서 CSS로 애니메이션을 할 수 있는 방법이 나오게 되었다. 이전에는 Javascript로 구현해야 하였기에 많은 CPU와 복잡한 로직으로 되어야 했지만 CSS의 Taansition을 통해 그나마 쉽게 컨트롤 할 수 있게 되었다. 이와 관련해서 여러가지 예제와 샘플들이 있지만 아래와 같이 버튼에 대해서 효과를 주는 간단한 CSS를 소개해 주고자 한다.
CSS의 Transition을 지원하는 브라우저에서만 확인할 수 있다. 예) 최신 Chrome browser
박스를 마우스 오버 시키면 박스가 빠르게 회전을 하고
마우스 Leave 시키면 반대편으로 빠르게 회전하여 돌아오는 CSS Transition 데모다.
박스를 마우스 오버 시키면 박스가 빠르게 회전을 하고
마우스 Leave 시키면 반대편으로 빠르게 회전하여 돌아오는 CSS Transition 데모다.
- A
- B
위 표현은 아래 코드를 통해서 나타낸다.
[코드] HTML의 Style 선언
[코드] HTML의 Tag 선언
HTML 5의 CSS3 Transition에 가장 잘 표현한 사이트가 있으니 여기에서 확인해 보고 경이로움을 같이 공유하였으면 합니다.
http://www.clicktorelease.com/code/css3dclouds/
그리고 어린이 도서와 같은 팝업북 같은 느낌의 사이트
http://www.creativesandbox.com/guidebook - 강추
'HTML5' 카테고리의 다른 글
| 인터랙티브로 말하는 웹과 웹앱 개발 (0) | 2013.09.21 |
|---|---|
| HTML5 Animation Tool - HTML5 애니메이션 만들기 - Adobe Edge (0) | 2013.09.01 |
| [HTML5] Cross Document messaging 통신 - 크로스 사이트 통신 하기 IFrame ( window.postMessage ) (0) | 2013.08.14 |
| ES5 & ES6 ( ECMAScript 5 & ECMAScript 6) Compact table (0) | 2013.07.17 |
| [CORS] Cross-Origin Resource Sharing (0) | 2013.04.01 |