15c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
25c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)   "http://www.w3.org/TR/html4/loose.dtd">
35c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)
45c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)<html lang="en">
55c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)<head>
65c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
75c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)    <title>Animation of left property</title>
85c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)    <style>
95c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         div {
105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             position: relative;
115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             left: 100px;
125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             height: 200px;
135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             width: 200px;
145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             background-color: #9bb;
155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             -webkit-animation-name: bounce;
165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             -webkit-animation-duration: 2s;
175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             -webkit-animation-iteration-count: infinite;
185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             -webkit-animation-direction: alternate;
195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             -webkit-animation-timing-function: ease-in-out;
205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         }
215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         
225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         @-webkit-keyframes bounce {
235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)           from {
245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             left: 100px;
255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)           }
265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)           to {
275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)             left: 300px;
285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)           }
295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         }
305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)         
315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)     </style>
325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)</head>
335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)<body>
345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)  <h1>Animation of 'left' property</h1>
355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)
365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)  <p>The element below should bounce 200 pixels left and right continuously</p>
375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)  
385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)  <div id="target">
395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)    This element should animate.
405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)  </div>
415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)
425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)</body>
435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)</html>