1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Animation using matrix()</title>
8 <style type="text/css" media="screen">
13 background-color: #9bb;
14 -webkit-animation-name: horiz, vert;
15 -webkit-animation-duration: 1s;
16 -webkit-animation-iteration-count: infinite;
17 -webkit-animation-direction: alternate;
18 -webkit-animation-timing-function: linear;
21 @-webkit-keyframes horiz {
25 @-webkit-keyframes vert {
30 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
31 <script type="text/javascript" charset="utf-8">
33 const expectedValues = [
34 // [animation-name, time, element-id, property, expected-value, tolerance]
35 [null, 0.75, "box", "left", 150, 40],
36 [null, 0.75, "box", "top", 225, 40],
41 var target = document.getElementById("box");
42 var left = window.getComputedStyle(target).left;
43 target.style.webkitAnimationName = "vert";
44 target.style.left = left;
49 setTimeout("removeAnim()", 500);
52 runAnimationTest(expectedValues, setup);
56 This test performs two animations, left and top. It animates over 1 second.
57 At 0.5 second it removes the left animation and the top animation should continue
58 from where it left off.