<!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. */
-webkit-animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards;
margin-bottom: 4px;
}
.delay_zero {
-webkit-animation-delay: 0s;
}
.delay_one_third {
-webkit-animation-delay: -1000000s;
}
.delay_two_thirds {
-webkit-animation-delay: -2000000s;
}
.delay_three_thirds {
-webkit-animation-delay: -3000000s;
}
.delay_four_thirds {
-webkit-animation-delay: -4000000s;
}
.delay_five_thirds {
-webkit-animation-delay: -5000000s;
}
.delay_six_thirds {
-webkit-animation-delay: -6000000s;
}
.expected {
-webkit-transform: translateX(100px);
}
#normal .expected.delay_six_thirds {
-webkit-transform: translateX(200px);
}
#alternate .expected.delay_three_thirds {
-webkit-transform: translateX(200px);
}
#reverse .expected.delay_zero, #reverse .expected.delay_three_thirds {
-webkit-transform: translateX(200px);
}
#alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds {
-webkit-transform: translateX(200px);
}
#normal div {
-webkit-animation-direction: normal;
}
#alternate div {
-webkit-animation-direction: alternate;
}
#reverse div {
-webkit-animation-direction: reverse;
}
#alternate-reverse div {
-webkit-animation-direction: alternate-reverse;
}
@-webkit-keyframes move {
from { -webkit-transform: translateX(100px); }
to { -webkit-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>