[HTML5] CSS Transition를 이용한 버튼 애니메이션 효과

CSS Transition를 이용한 버튼 애니메이션 효과

참조 URL

1. http://html5snippets.com/snippets/59-introduction-to-css3-animations
   
2. http://www.the-art-of-web.com/css/css-animation/#.Ufm1yJLxqlg
3. http://www.creativebloq.com/css3/animation-with-css3-712437
4. http://lab.tylergaw.com/themanfromhollywood/
5. http://cssdeck.com/labs/google-doodle-in-css-follow-up
6. http://www.clicktorelease.com/code/css3dclouds/
7. http://tympanus.net/Tutorials/AnimatedButtons/index2.html
8. http://tympanus.net/Tutorials/OriginalHoverEffects/index.html
   
9. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/
   
10. http://2012.beercamp.com/
11. http://www.creativesandbox.com/guidebook
    

 HTML5가 나오면서 CSS로 애니메이션을 할 수 있는 방법이 나오게 되었다. 이전에는 Javascript로 구현해야 하였기에 많은 CPU와 복잡한 로직으로 되어야 했지만 CSS의 Taansition을 통해 그나마 쉽게 컨트롤 할 수 있게 되었다. 이와 관련해서 여러가지 예제와 샘플들이 있지만 아래와 같이 버튼에 대해서 효과를 주는 간단한 CSS를 소개해 주고자 한다.

CSS의 Transition을 지원하는 브라우저에서만 확인할 수 있다. 예) 최신 Chrome browser
박스를 마우스 오버 시키면 박스가 빠르게 회전을 하고
마우스 Leave 시키면 반대편으로 빠르게 회전하여 돌아오는 CSS Transition 데모다.

• A
• B

위 표현은 아래 코드를 통해서 나타낸다.

<style> .csstransitionDemo {} .csstransitionDemo li { -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.3s; -webkit-transition-property: all; -webkit-transition-timing-function: linear; background-attachment: scroll; background-clip: border-box; background-color: rgb(0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; color: rgb(255, 255, 255); cursor: pointer; display: block; float: left; font-family: 'Droid Sans', arial, serif; font-size: 16px; height: 50px; line-height: 21px; list-style-type: disc; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; text-align: left; text-indent: -80000px; transition-delay: 0s; transition-duration: 0.3s; transition-property: all; transition-timing-function: linear; width: 50px; } .csstransitionDemo li:hover { -webkit-transform: rotate(360deg); } </style>

[코드] HTML의 Style 선언

<div> CSS의 Transition을 지원하는 브라우저에서만 확인할 수 있다. 예) 최신 Chrome browser <br/> 박스를 마우스 오버 시키면 박스가 빠르게 회전을 하고<br/> 마우스 Leave 시키면 반대편으로 빠르게 회전하여 돌아오는 CSS Transition 데모다.<br/> <ul class='csstransitionDemo'> <li>A</li> <li>B</li> </ul> </div>

[코드] HTML의 Tag 선언

 HTML 5의 CSS3 Transition에 가장 잘 표현한 사이트가 있으니 여기에서 확인해 보고 경이로움을 같이 공유하였으면 합니다.

http://www.clicktorelease.com/code/css3dclouds/

그리고 어린이 도서와 같은 팝업북 같은 느낌의 사이트

http://www.creativesandbox.com/guidebook - 강추