• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<html lang="en">
3<head>
4  <style>
5    .wrapper {
6      margin-bottom: 20px;
7    }
8    .wrapper div {
9      height: 18px;
10      width: 200px;
11      color: white;
12    }
13    .expected {
14      background-color: red;
15    }
16    .animated {
17      background-color: green;
18      /* This timing function has value 0 at inputs of 1/3 and 2/3. Chosen because it's very asymmetric about x = y. */
19      -webkit-animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards;
20      margin-bottom: 4px;
21    }
22
23    .delay_zero {
24      -webkit-animation-delay: 0s;
25    }
26    .delay_one_third {
27      -webkit-animation-delay: -1000000s;
28    }
29    .delay_two_thirds {
30      -webkit-animation-delay: -2000000s;
31    }
32    .delay_three_thirds {
33      -webkit-animation-delay: -3000000s;
34    }
35    .delay_four_thirds {
36      -webkit-animation-delay: -4000000s;
37    }
38    .delay_five_thirds {
39      -webkit-animation-delay: -5000000s;
40    }
41    .delay_six_thirds {
42      -webkit-animation-delay: -6000000s;
43    }
44
45    .expected {
46      -webkit-transform: translateX(100px);
47    }
48    #normal .expected.delay_six_thirds {
49      -webkit-transform: translateX(200px);
50    }
51    #alternate .expected.delay_three_thirds {
52      -webkit-transform: translateX(200px);
53    }
54    #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds {
55      -webkit-transform: translateX(200px);
56    }
57    #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds {
58      -webkit-transform: translateX(200px);
59    }
60
61    #normal div {
62      -webkit-animation-direction: normal;
63    }
64    #alternate div {
65      -webkit-animation-direction: alternate;
66    }
67    #reverse div {
68      -webkit-animation-direction: reverse;
69    }
70    #alternate-reverse div {
71      -webkit-animation-direction: alternate-reverse;
72    }
73
74    @-webkit-keyframes move {
75      from { -webkit-transform: translateX(100px); }
76      to   { -webkit-transform: translateX(200px); }
77    }
78  </style>
79</head>
80<body>
81<div>
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
84  immediately above it.
85</div>
86<div class="wrapper" id="normal">
87  <div class="expected delay_zero">normal</div>
88  <div class="animated delay_zero">normal</div>
89  <div class="expected delay_one_third">normal</div>
90  <div class="animated delay_one_third">normal</div>
91  <div class="expected delay_two_thirds">normal</div>
92  <div class="animated delay_two_thirds">normal</div>
93  <div class="expected delay_three_thirds">normal</div>
94  <div class="animated delay_three_thirds">normal</div>
95  <div class="expected delay_four_thirds">normal</div>
96  <div class="animated delay_four_thirds">normal</div>
97  <div class="expected delay_five_thirds">normal</div>
98  <div class="animated delay_five_thirds">normal</div>
99  <div class="expected delay_six_thirds">normal</div>
100  <div class="animated delay_six_thirds">normal</div>
101</div>
102<div class="wrapper" id="alternate">
103  <div class="expected delay_zero">alternate</div>
104  <div class="animated delay_zero">alternate</div>
105  <div class="expected delay_one_third">alternate</div>
106  <div class="animated delay_one_third">alternate</div>
107  <div class="expected delay_two_thirds">alternate</div>
108  <div class="animated delay_two_thirds">alternate</div>
109  <div class="expected delay_three_thirds">alternate</div>
110  <div class="animated delay_three_thirds">alternate</div>
111  <div class="expected delay_four_thirds">alternate</div>
112  <div class="animated delay_four_thirds">alternate</div>
113  <div class="expected delay_five_thirds">alternate</div>
114  <div class="animated delay_five_thirds">alternate</div>
115  <div class="expected delay_six_thirds">alternate</div>
116  <div class="animated delay_six_thirds">alternate</div>
117</div>
118<div class="wrapper" id="reverse">
119  <div class="expected delay_zero">reverse</div>
120  <div class="animated delay_zero">reverse</div>
121  <div class="expected delay_one_third">reverse</div>
122  <div class="animated delay_one_third">reverse</div>
123  <div class="expected delay_two_thirds">reverse</div>
124  <div class="animated delay_two_thirds">reverse</div>
125  <div class="expected delay_three_thirds">reverse</div>
126  <div class="animated delay_three_thirds">reverse</div>
127  <div class="expected delay_four_thirds">reverse</div>
128  <div class="animated delay_four_thirds">reverse</div>
129  <div class="expected delay_five_thirds">reverse</div>
130  <div class="animated delay_five_thirds">reverse</div>
131  <div class="expected delay_six_thirds">reverse</div>
132  <div class="animated delay_six_thirds">reverse</div>
133</div>
134<div class="wrapper" id="alternate-reverse">
135  <div class="expected delay_zero">alternate-reverse</div>
136  <div class="animated delay_zero">alternate-reverse</div>
137  <div class="expected delay_one_third">alternate-reverse</div>
138  <div class="animated delay_one_third">alternate-reverse</div>
139  <div class="expected delay_two_thirds">alternate-reverse</div>
140  <div class="animated delay_two_thirds">alternate-reverse</div>
141  <div class="expected 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>
144  <div class="animated delay_four_thirds">alternate-reverse</div>
145  <div class="expected 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>
148  <div class="animated delay_six_thirds">alternate-reverse</div>
149</div>
150</body>
151</html>
152