animate-none.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <title>Testing animation-name: none</title>
  7. <style type="text/css" media="screen">
  8. div {
  9. width: 300px;
  10. height: 100px;
  11. margin: 10px;
  12. -webkit-animation-name: 'fail';
  13. -webkit-animation-duration: 3.5s;
  14. -webkit-animation-iteration-count: infinite;
  15. -webkit-animation-direction: alternate;
  16. -webkit-animation-timing-function: linear;
  17. }
  18. @-webkit-keyframes 'fail' {
  19. from {
  20. transform: rotate(-90deg);
  21. }
  22. to {
  23. transform: rotate(90deg);
  24. }
  25. }
  26. #box1 {
  27. position: relative;
  28. background-color: blue;
  29. -webkit-animation-name: 'sway1';
  30. -webkit-animation-duration: 2.5s;
  31. -webkit-animation-iteration-count: infinite;
  32. -webkit-animation-direction: alternate;
  33. -webkit-animation-timing-function: linear;
  34. }
  35. @-webkit-keyframes 'sway1' {
  36. from {
  37. transform: translate(0, 0);
  38. }
  39. to {
  40. transform: translate(200px, 0);
  41. }
  42. }
  43. #box2 {
  44. position: relative;
  45. background-color: red;
  46. -webkit-animation-name: 'sway2';
  47. -webkit-animation-duration: 3s;
  48. -webkit-animation-iteration-count: infinite;
  49. -webkit-animation-direction: alternate;
  50. -webkit-animation-timing-function: linear;
  51. }
  52. @-webkit-keyframes 'sway2' {
  53. from {
  54. transform: translate(0px, 0);
  55. }
  56. to {
  57. transform: translate(200px, 0);
  58. }
  59. }
  60. #box3 {
  61. position: relative;
  62. background-color: green;
  63. -webkit-animation-name: 'sway3';
  64. -webkit-animation-duration: 3.5s;
  65. -webkit-animation-iteration-count: infinite;
  66. -webkit-animation-direction: alternate;
  67. -webkit-animation-timing-function: linear;
  68. }
  69. @-webkit-keyframes 'sway3' {
  70. from {
  71. transform: translate(0px, 0);
  72. }
  73. to {
  74. transform: translate(200px, 0);
  75. }
  76. }
  77. #box4 {
  78. position: relative;
  79. background-color: orange;
  80. -webkit-animation-name: 'none';
  81. -webkit-animation-duration: 3s;
  82. -webkit-animation-iteration-count: infinite;
  83. -webkit-animation-direction: alternate;
  84. -webkit-animation-timing-function: linear;
  85. }
  86. #box5 {
  87. position: relative;
  88. background-color: purple;
  89. -webkit-animation-name: 'none';
  90. -webkit-animation-duration: 3s;
  91. -webkit-animation-iteration-count: infinite;
  92. -webkit-animation-direction: alternate;
  93. -webkit-animation-timing-function: linear;
  94. }
  95. #box6 {
  96. position: relative;
  97. background-color: blue;
  98. -webkit-animation-name: 'fade', 'sway6';
  99. -webkit-animation-duration: 3s, 4s;
  100. -webkit-animation-iteration-count: infinite, infinite;
  101. -webkit-animation-direction: alternate, alternate;
  102. -webkit-animation-timing-function: linear, linear;
  103. }
  104. @-webkit-keyframes 'sway6' {
  105. from {
  106. transform: translate(0px, 0);
  107. }
  108. to {
  109. transform: translate(200px, 0);
  110. }
  111. }
  112. @-webkit-keyframes 'fade' {
  113. from {
  114. opacity: 1.0;
  115. }
  116. to {
  117. opacity: 0.1;
  118. }
  119. }
  120. /* set up animation that should never be run */
  121. @-webkit-keyframes none {
  122. from {
  123. transform: translate(200px, 0) rotate(-90deg);
  124. }
  125. to {
  126. transform: translate(0px, 0) rotate(90deg);
  127. }
  128. }
  129. </style>
  130. <script type="text/javascript" charset="utf-8">
  131. function killanims() {
  132. console.log("click");
  133. var box1 = document.getElementById("box1");
  134. box1.style.webkitAnimationName = '';
  135. var box2 = document.getElementById("box2");
  136. box2.style.webkitAnimationName = 'none';
  137. var box3 = document.getElementById("box3");
  138. box3.style.webkitAnimationName = "'none'";
  139. var box6 = document.getElementById("box6");
  140. box6.style.webkitAnimationName = "none, 'sway6'";
  141. }
  142. setTimeout(killanims, 2000);
  143. </script>
  144. </head>
  145. <body>
  146. <h2>Testing animation: none</h2>
  147. <p>
  148. After 2 seconds only the blue rectangles should be
  149. animating.
  150. Any resulting animation
  151. that involves rotation or fading means that this test has FAILED.</p>
  152. <div id="box1">
  153. This rectangle starts with an animation. After 2 seconds a timer
  154. will set the animation-name on the element to '' (the empty string).
  155. The CSS rule should cause the animation to continue.
  156. </div>
  157. <div id="box2">
  158. This rectangle starts with an animation. After 2 seconds a timer
  159. will set the animation-name on the element to 'none' (as an identifier).
  160. This should cause the animation to stop.
  161. </div>
  162. <div id="box3">
  163. This rectangle starts with an animation. After 2 seconds a timer
  164. will set the animation-name on the element to 'none' (as a string).
  165. This should cause the animation to stop.
  166. </div>
  167. <div id="box4">
  168. This rectangle starts with an animation, but animation-name is
  169. set to 'none' (as an identifier). No animation should run.
  170. </div>
  171. <div id="box5">
  172. This rectangle starts with an animation, but animation-name is
  173. set to 'none' (as a string). No animation should run.
  174. </div>
  175. <div id="box6">
  176. This rectangle starts with two animations. After 2 seconds a timer
  177. will set the animation-name on the fade to 'none'. The other
  178. animation (horizontal) should continue.
  179. </div>
  180. </body>
  181. </html>