OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
5 body { | 5 body { |
6 margin: 0; | 6 margin: 0; |
7 } | 7 } |
8 | 8 |
9 .box { | 9 .box { |
10 position: relative; | 10 position: relative; |
(...skipping 16 matching lines...) Expand all Loading... |
27 #indicator2 { | 27 #indicator2 { |
28 top: 100px; | 28 top: 100px; |
29 } | 29 } |
30 | 30 |
31 #box1 { | 31 #box1 { |
32 left: 200px; | 32 left: 200px; |
33 -webkit-animation: move-left 2s linear; | 33 -webkit-animation: move-left 2s linear; |
34 } | 34 } |
35 | 35 |
36 #box2 { | 36 #box2 { |
37 -webkit-transform: translateX(200px); | 37 transform: translateX(200px); |
38 -webkit-animation: move-transform 2s linear; | 38 -webkit-animation: move-transform 2s linear; |
39 } | 39 } |
40 | 40 |
41 @-webkit-keyframes move-left { | 41 @-webkit-keyframes move-left { |
42 0% { | 42 0% { |
43 left: 0; | 43 left: 0; |
44 opacity: 0; | 44 opacity: 0; |
45 } | 45 } |
46 50% { | 46 50% { |
47 left: 0; | 47 left: 0; |
48 opacity: 1; | 48 opacity: 1; |
49 } | 49 } |
50 75% { | 50 75% { |
51 opacity: 1; | 51 opacity: 1; |
52 } | 52 } |
53 100% { | 53 100% { |
54 opacity: 1; | 54 opacity: 1; |
55 } | 55 } |
56 } | 56 } |
57 | 57 |
58 @-webkit-keyframes move-transform { | 58 @-webkit-keyframes move-transform { |
59 0% { | 59 0% { |
60 -webkit-transform: translateX(0); | 60 transform: translateX(0); |
61 opacity: 0; | 61 opacity: 0; |
62 } | 62 } |
63 50% { | 63 50% { |
64 -webkit-transform: translateX(0); | 64 transform: translateX(0); |
65 opacity: 1; | 65 opacity: 1; |
66 } | 66 } |
67 75% { | 67 75% { |
68 opacity: 1; | 68 opacity: 1; |
69 } | 69 } |
70 100% { | 70 100% { |
71 opacity: 1; | 71 opacity: 1; |
72 } | 72 } |
73 } | 73 } |
74 </style> | 74 </style> |
(...skipping 16 matching lines...) Expand all Loading... |
91 Test is only reliable when run in DRT. --> | 91 Test is only reliable when run in DRT. --> |
92 <div class="indicator" id="indicator1"></div> | 92 <div class="indicator" id="indicator1"></div> |
93 <div class="indicator" id="indicator2"></div> | 93 <div class="indicator" id="indicator2"></div> |
94 | 94 |
95 <div class="box" id="box1"></div> | 95 <div class="box" id="box1"></div> |
96 <div class="box" id="box2"></div> | 96 <div class="box" id="box2"></div> |
97 | 97 |
98 <div id="result"></div> | 98 <div id="result"></div> |
99 </body> | 99 </body> |
100 </html> | 100 </html> |
OLD | NEW |