반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 Transitions (-webkit-transition)

2012. 1. 19. 18:15 | Posted by 솔웅


Basically JavaScript is for dynamic display in Web Programming.
In HTML5 Not only JavaScript but also CSS has excellent dynamic display functions.

One of the Thing is below webkit-transition.
-webkit-transition

HTML5 는 JavaScript와 CSS와 협력해서 여러 효과를 냅니다.
주로 JavaScript 가 동적인 효과를 주는데 사용되는데요. 이제 CSS에서도 이런 동적인 효과를 줄 수 있습니다. webkit 중에 transition을 사용하시면 됩니다.

Just Click the Right and Left Button then you can see it.
왼쪽 오른쪽 버튼을 눌러보세요.


HTML5 Presentation
CSS

Transitions


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


The Red rectangle below is moving smoothly with using webkit-transition.
아래 사각형은 아주 자연스럽게 움직이죠?
Animation 효과도 줄수 있고 게임에서도 이용할 수 있지 않을까요?

아래 소스코드가 있습니다. 다운 받아 가세요.
Download the source code below.


반응형

Comment