출처 - http://shub.tistory.com/entry/HTML5-자바스크립트로-CSS-애니메이션-지정하기
<!DOCTYPE HTML>
<HTML lang="ko">
<HEAD>
<TITLE>NEAT master</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<div id="box1" class="page" style="display: block; background: #FF0000;" >
빨간 상자
<br>
<input type="button" value="시작" onClick="SetTransform();">
</div>
<div id="box2" class="page" style="background: #00FF00;" >
녹색 상자
</div>
<script>
function SetTransform(){
var t_obj1 = document.getElementById('box1');
var t_obj2 = document.getElementById('box2');
// 초기화
t_obj1.style.webkitTransitionProperty = '';
t_obj1.style.webkitTransitionDuration = '0s';
t_obj1.style.webkitTransitionTimingFunction = '';
t_obj1.style.left = '0%';
t_obj2.style.webkitTransitionProperty = '';
t_obj2.style.webkitTransitionDuration = '0s';
t_obj2.style.webkitTransitionTimingFunction = '';
t_obj2.style.display= 'block';
t_obj2.style.left = '100%';
setTimeout( function() {
// 애니메이션 지정 및 실행
t_obj1.style.webkitTransitionProperty = 'left';
t_obj1.style.webkitTransitionDuration = '0.5s';
t_obj1.style.webkitTransitionTimingFunction = 'ease-in';
t_obj1.style.left = '-100%';
t_obj2.style.webkitTransitionProperty = 'left';
t_obj2.style.webkitTransitionDuration = '0.5s';
t_obj2.style.webkitTransitionTimingFunction = 'ease-in';
t_obj2.style.left = '0%';
}, 0 );
}
</script>
</BODY>
</HTML>
