HTML5 Transitions (-webkit-transition)

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.
왼쪽 오른쪽 버튼을 눌러보세요.

CSS

Transitions

#box.left { margin-left: 0; } #box.right { margin-left: 1000px; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';

#box { -webkit-transition: margin-left 1s ease-in-out; } document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';

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.

HTML5Transition.html