1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 4<html lang="en"> 5<head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Transition of left property</title> 8 <style> 9 div { 10 position: relative; 11 left: 100px; 12 height: 200px; 13 width: 300px; 14 background-color: #9bb; 15 -webkit-transition-property: left; 16 -webkit-transition-duration: 1s; 17 } 18 </style> 19 <script type="text/javascript" charset="utf-8"> 20 21 var flag = true; 22 23 function init() { 24 document.getElementById("target").addEventListener("click", function(evt) { 25 if (flag) 26 evt.target.style.left = "300px"; 27 else 28 evt.target.style.left = "100px"; 29 flag = !flag; 30 }, false); 31 } 32 33 window.addEventListener("load", init, false); 34 </script> 35</head> 36<body> 37 <h1>Transition of 'left' property</h1> 38 39 <p>The element below should move 200 pixels left or right when clicked</p> 40 41 <div id="target"> 42 This element should transition. 43 </div> 44 45</body> 46</html>