| 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 |