<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing animation-name: none</title>
<style type="text/css" media="screen">
div {
width: 300px;
height: 100px;
margin: 10px;
-webkit-animation-name: 'fail';
-webkit-animation-duration: 3.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes 'fail' {
from {
-webkit-transform: rotate(-90deg);
}
to {
-webkit-transform: rotate(90deg);
}
}
#box1 {
position: relative;
background-color: blue;
-webkit-animation-name: 'sway1';
-webkit-animation-duration: 2.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes 'sway1' {
from {
-webkit-transform: translate(0, 0);
}
to {
-webkit-transform: translate(200px, 0);
}
}
#box2 {
position: relative;
background-color: red;
-webkit-animation-name: 'sway2';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes 'sway2' {
from {
-webkit-transform: translate(0px, 0);
}
to {
-webkit-transform: translate(200px, 0);
}
}
#box3 {
position: relative;
background-color: green;
-webkit-animation-name: 'sway3';
-webkit-animation-duration: 3.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes 'sway3' {
from {
-webkit-transform: translate(0px, 0);
}
to {
-webkit-transform: translate(200px, 0);
}
}
#box4 {
position: relative;
background-color: orange;
-webkit-animation-name: 'none';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
#box5 {
position: relative;
background-color: purple;
-webkit-animation-name: 'none';
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
#box6 {
position: relative;
background-color: blue;
-webkit-animation-name: 'fade', 'sway6';
-webkit-animation-duration: 3s, 4s;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: alternate, alternate;
-webkit-animation-timing-function: linear, linear;
}
@-webkit-keyframes 'sway6' {
from {
-webkit-transform: translate(0px, 0);
}
to {
-webkit-transform: translate(200px, 0);
}
}
@-webkit-keyframes 'fade' {
from {
opacity: 1.0;
}
to {
opacity: 0.1;
}
}
/* set up animation that should never be run */
@-webkit-keyframes none {
from {
-webkit-transform: translate(200px, 0) rotate(-90deg);
}
to {
-webkit-transform: translate(0px, 0) rotate(90deg);
}
}
</style>
<script type="text/javascript" charset="utf-8">
function killanims() {
console.log("click");
var box1 = document.getElementById("box1");
box1.style.webkitAnimationName = '';
var box2 = document.getElementById("box2");
box2.style.webkitAnimationName = 'none';
var box3 = document.getElementById("box3");
box3.style.webkitAnimationName = "'none'";
var box6 = document.getElementById("box6");
box6.style.webkitAnimationName = "none, 'sway6'";
}
setTimeout(killanims, 2000);
</script>
</head>
<body>
<h2>Testing animation: none</h2>
<p>
After 2 seconds only the blue rectangles should be
animating.
Any resulting animation
that involves rotation or fading means that this test has FAILED.</p>
<div id="box1">
This rectangle starts with an animation. After 2 seconds a timer
will set the animation-name on the element to '' (the empty string).
The CSS rule should cause the animation to continue.
</div>
<div id="box2">
This rectangle starts with an animation. After 2 seconds a timer
will set the animation-name on the element to 'none' (as an identifier).
This should cause the animation to stop.
</div>
<div id="box3">
This rectangle starts with an animation. After 2 seconds a timer
will set the animation-name on the element to 'none' (as a string).
This should cause the animation to stop.
</div>
<div id="box4">
This rectangle starts with an animation, but animation-name is
set to 'none' (as an identifier). No animation should run.
</div>
<div id="box5">
This rectangle starts with an animation, but animation-name is
set to 'none' (as a string). No animation should run.
</div>
<div id="box6">
This rectangle starts with two animations. After 2 seconds a timer
will set the animation-name on the fade to 'none'. The other
animation (horizontal) should continue.
</div>
</body>
</html>