207 lines
5.9 KiB
HTML
207 lines
5.9 KiB
HTML
<!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> |