OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <html lang="en"> | 2 <html lang="en"> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 .wrapper { | 5 .wrapper { |
6 margin-bottom: 20px; | 6 margin-bottom: 20px; |
7 } | 7 } |
8 .wrapper div { | 8 .wrapper div { |
9 height: 18px; | 9 height: 18px; |
10 width: 200px; | 10 width: 200px; |
(...skipping 25 matching lines...) Expand all Loading... |
36 -webkit-animation-delay: -4000000s; | 36 -webkit-animation-delay: -4000000s; |
37 } | 37 } |
38 .delay_five_thirds { | 38 .delay_five_thirds { |
39 -webkit-animation-delay: -5000000s; | 39 -webkit-animation-delay: -5000000s; |
40 } | 40 } |
41 .delay_six_thirds { | 41 .delay_six_thirds { |
42 -webkit-animation-delay: -6000000s; | 42 -webkit-animation-delay: -6000000s; |
43 } | 43 } |
44 | 44 |
45 .expected { | 45 .expected { |
46 -webkit-transform: translateX(100px); | 46 transform: translateX(100px); |
47 } | 47 } |
48 #normal .expected.delay_six_thirds { | 48 #normal .expected.delay_six_thirds { |
49 -webkit-transform: translateX(200px); | 49 transform: translateX(200px); |
50 } | 50 } |
51 #alternate .expected.delay_three_thirds { | 51 #alternate .expected.delay_three_thirds { |
52 -webkit-transform: translateX(200px); | 52 transform: translateX(200px); |
53 } | 53 } |
54 #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds { | 54 #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds { |
55 -webkit-transform: translateX(200px); | 55 transform: translateX(200px); |
56 } | 56 } |
57 #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_
six_thirds { | 57 #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_
six_thirds { |
58 -webkit-transform: translateX(200px); | 58 transform: translateX(200px); |
59 } | 59 } |
60 | 60 |
61 #normal div { | 61 #normal div { |
62 -webkit-animation-direction: normal; | 62 -webkit-animation-direction: normal; |
63 } | 63 } |
64 #alternate div { | 64 #alternate div { |
65 -webkit-animation-direction: alternate; | 65 -webkit-animation-direction: alternate; |
66 } | 66 } |
67 #reverse div { | 67 #reverse div { |
68 -webkit-animation-direction: reverse; | 68 -webkit-animation-direction: reverse; |
69 } | 69 } |
70 #alternate-reverse div { | 70 #alternate-reverse div { |
71 -webkit-animation-direction: alternate-reverse; | 71 -webkit-animation-direction: alternate-reverse; |
72 } | 72 } |
73 | 73 |
74 @-webkit-keyframes move { | 74 @-webkit-keyframes move { |
75 from { -webkit-transform: translateX(100px); } | 75 from { transform: translateX(100px); } |
76 to { -webkit-transform: translateX(200px); } | 76 to { transform: translateX(200px); } |
77 } | 77 } |
78 </style> | 78 </style> |
79 </head> | 79 </head> |
80 <body> | 80 <body> |
81 <div> | 81 <div> |
82 Tests animation direction with timing functions and hardware acceleration. | 82 Tests animation direction with timing functions and hardware acceleration. |
83 The green boxes use live animations and each should line up with the red box | 83 The green boxes use live animations and each should line up with the red box |
84 immediately above it. | 84 immediately above it. |
85 </div> | 85 </div> |
86 <div class="wrapper" id="normal"> | 86 <div class="wrapper" id="normal"> |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
142 <div class="animated delay_three_thirds">alternate-reverse</div> | 142 <div class="animated delay_three_thirds">alternate-reverse</div> |
143 <div class="expected delay_four_thirds">alternate-reverse</div> | 143 <div class="expected delay_four_thirds">alternate-reverse</div> |
144 <div class="animated delay_four_thirds">alternate-reverse</div> | 144 <div class="animated delay_four_thirds">alternate-reverse</div> |
145 <div class="expected delay_five_thirds">alternate-reverse</div> | 145 <div class="expected delay_five_thirds">alternate-reverse</div> |
146 <div class="animated delay_five_thirds">alternate-reverse</div> | 146 <div class="animated delay_five_thirds">alternate-reverse</div> |
147 <div class="expected delay_six_thirds">alternate-reverse</div> | 147 <div class="expected delay_six_thirds">alternate-reverse</div> |
148 <div class="animated delay_six_thirds">alternate-reverse</div> | 148 <div class="animated delay_six_thirds">alternate-reverse</div> |
149 </div> | 149 </div> |
150 </body> | 150 </body> |
151 </html> | 151 </html> |
OLD | NEW |