| <!doctype html> |
| <html lang="en"> |
| <head> |
| <style> |
| .wrapper { |
| margin-bottom: 20px; |
| } |
| .wrapper div { |
| height: 18px; |
| width: 200px; |
| color: white; |
| } |
| .expected { |
| background-color: red; |
| } |
| .animated { |
| background-color: green; |
| /* This timing function has value 0 at inputs of 1/3 and 2/3. Chosen because it's very asymmetric about x = y. */ |
| animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards; |
| margin-bottom: 4px; |
| } |
| |
| .delay_zero { |
| animation-delay: 0s; |
| } |
| .delay_one_third { |
| animation-delay: -1000000s; |
| } |
| .delay_two_thirds { |
| animation-delay: -2000000s; |
| } |
| .delay_three_thirds { |
| animation-delay: -3000000s; |
| } |
| .delay_four_thirds { |
| animation-delay: -4000000s; |
| } |
| .delay_five_thirds { |
| animation-delay: -5000000s; |
| } |
| .delay_six_thirds { |
| animation-delay: -6000000s; |
| } |
| |
| .expected { |
| transform: translateX(100px); |
| } |
| #normal .expected.delay_six_thirds { |
| transform: translateX(200px); |
| } |
| #alternate .expected.delay_three_thirds { |
| transform: translateX(200px); |
| } |
| #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds { |
| transform: translateX(200px); |
| } |
| #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds { |
| transform: translateX(200px); |
| } |
| |
| #normal div { |
| animation-direction: normal; |
| } |
| #alternate div { |
| animation-direction: alternate; |
| } |
| #reverse div { |
| animation-direction: reverse; |
| } |
| #alternate-reverse div { |
| animation-direction: alternate-reverse; |
| } |
| |
| @keyframes move { |
| from { transform: translateX(100px); } |
| to { transform: translateX(200px); } |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| Tests animation direction with timing functions and hardware acceleration. |
| The green boxes use live animations and each should line up with the red box |
| immediately above it. |
| </div> |
| <div class="wrapper" id="normal"> |
| <div class="expected delay_zero">normal</div> |
| <div class="animated delay_zero">normal</div> |
| <div class="expected delay_one_third">normal</div> |
| <div class="animated delay_one_third">normal</div> |
| <div class="expected delay_two_thirds">normal</div> |
| <div class="animated delay_two_thirds">normal</div> |
| <div class="expected delay_three_thirds">normal</div> |
| <div class="animated delay_three_thirds">normal</div> |
| <div class="expected delay_four_thirds">normal</div> |
| <div class="animated delay_four_thirds">normal</div> |
| <div class="expected delay_five_thirds">normal</div> |
| <div class="animated delay_five_thirds">normal</div> |
| <div class="expected delay_six_thirds">normal</div> |
| <div class="animated delay_six_thirds">normal</div> |
| </div> |
| <div class="wrapper" id="alternate"> |
| <div class="expected delay_zero">alternate</div> |
| <div class="animated delay_zero">alternate</div> |
| <div class="expected delay_one_third">alternate</div> |
| <div class="animated delay_one_third">alternate</div> |
| <div class="expected delay_two_thirds">alternate</div> |
| <div class="animated delay_two_thirds">alternate</div> |
| <div class="expected delay_three_thirds">alternate</div> |
| <div class="animated delay_three_thirds">alternate</div> |
| <div class="expected delay_four_thirds">alternate</div> |
| <div class="animated delay_four_thirds">alternate</div> |
| <div class="expected delay_five_thirds">alternate</div> |
| <div class="animated delay_five_thirds">alternate</div> |
| <div class="expected delay_six_thirds">alternate</div> |
| <div class="animated delay_six_thirds">alternate</div> |
| </div> |
| <div class="wrapper" id="reverse"> |
| <div class="expected delay_zero">reverse</div> |
| <div class="animated delay_zero">reverse</div> |
| <div class="expected delay_one_third">reverse</div> |
| <div class="animated delay_one_third">reverse</div> |
| <div class="expected delay_two_thirds">reverse</div> |
| <div class="animated delay_two_thirds">reverse</div> |
| <div class="expected delay_three_thirds">reverse</div> |
| <div class="animated delay_three_thirds">reverse</div> |
| <div class="expected delay_four_thirds">reverse</div> |
| <div class="animated delay_four_thirds">reverse</div> |
| <div class="expected delay_five_thirds">reverse</div> |
| <div class="animated delay_five_thirds">reverse</div> |
| <div class="expected delay_six_thirds">reverse</div> |
| <div class="animated delay_six_thirds">reverse</div> |
| </div> |
| <div class="wrapper" id="alternate-reverse"> |
| <div class="expected delay_zero">alternate-reverse</div> |
| <div class="animated delay_zero">alternate-reverse</div> |
| <div class="expected delay_one_third">alternate-reverse</div> |
| <div class="animated delay_one_third">alternate-reverse</div> |
| <div class="expected delay_two_thirds">alternate-reverse</div> |
| <div class="animated delay_two_thirds">alternate-reverse</div> |
| <div class="expected delay_three_thirds">alternate-reverse</div> |
| <div class="animated delay_three_thirds">alternate-reverse</div> |
| <div class="expected delay_four_thirds">alternate-reverse</div> |
| <div class="animated delay_four_thirds">alternate-reverse</div> |
| <div class="expected delay_five_thirds">alternate-reverse</div> |
| <div class="animated delay_five_thirds">alternate-reverse</div> |
| <div class="expected delay_six_thirds">alternate-reverse</div> |
| <div class="animated delay_six_thirds">alternate-reverse</div> |
| </div> |
| </body> |
| </html> |