4 <title>Test of -webkit-animation-direction timing functions</title>
17 -webkit-animation-duration: 2s;
18 -webkit-animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
19 -webkit-animation-iteration-count: 4;
23 -webkit-animation-name: move1;
24 background-color: blue;
29 -webkit-animation-direction: normal;
33 -webkit-animation-direction: alternate;
37 -webkit-animation-direction: reverse;
41 -webkit-animation-direction: alternate-reverse;
44 @-webkit-keyframes move1 {
49 <script src="resources/animation-test-helpers.js"></script>
51 const expectedValues = [
52 // [animation-name, time, element-id, property, expected-value, tolerance]
53 ["move1", 0.2, "box1", "left", 18, 10],
54 ["move1", 0.2, "box2", "left", 18, 10],
55 ["move1", 0.2, "box3", "left", 198, 10],
56 ["move1", 0.2, "box4", "left", 198, 10],
57 ["move1", 2.2, "box1", "left", 18, 10],
58 ["move1", 2.2, "box2", "left", 198, 10],
59 ["move1", 2.2, "box3", "left", 198, 10],
60 ["move1", 2.2, "box4", "left", 18, 10],
63 runAnimationTest(expectedValues);
68 <div id="box1" class="box move1 normal">normal</div>
69 <div id="box2" class="box move1 alternate">alternate</div>
70 <div id="box3" class="box move1 reverse">reverse</div>
71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>
72 <div id="result"></div>