Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: timelapse
Fetching contributors…

Cannot retrieve contributors at this time

65 lines (58 sloc) 2.006 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation using matrix()</title>
<style type="text/css" media="screen">
#box {
position: relative;
height: 20px;
width: 20px;
background-color: #9bb;
-webkit-animation-name: horiz, vert;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
@-webkit-keyframes horiz {
from { left: 0px; }
to { left:300px; }
@-webkit-keyframes vert {
from { top: 0px; }
to { top: 300px; }
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
[null, 0.75, "box", "left", 150, 40],
[null, 0.75, "box", "top", 225, 40],
function removeAnim()
var target = document.getElementById("box");
var left = window.getComputedStyle(target).left; = "vert"; = left;
function setup()
setTimeout("removeAnim()", 500);
runAnimationTest(expectedValues, setup);
This test performs two animations, left and top. It animates over 1 second.
At 0.5 second it removes the left animation and the top animation should continue
from where it left off.
<div id="box">
<div id="result">
Jump to Line
Something went wrong with that request. Please try again.