animate-duration.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Overriding Animations</title>
  7. <script src="../../shared/javascript/utils.js" type="text/javascript" charset="utf-8"></script>
  8. <style type="text/css" media="screen">
  9. .container {
  10. position: relative;
  11. width: 400px;
  12. height: 120px;
  13. border: 1px solid black;
  14. margin: 10px;
  15. }
  16. .box {
  17. position: relative;
  18. width: 100px;
  19. height: 100px;
  20. margin: 10px;
  21. background-color: blue;
  22. z-index: 0;
  23. animation-name: slide;
  24. animation-duration: 1s;
  25. animation-direction: alternate;
  26. animation-timing-function: ease-in-out;
  27. animation-iteration-count: infinite;
  28. }
  29. .one {
  30. animation-duration: 0s;
  31. }
  32. .two {
  33. animation-duration: 0;
  34. }
  35. @keyframes slide {
  36. from { transform: translateX(0); }
  37. to { transform: translateX(280px); }
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <p>Single anim (should keep animating)</p>
  43. <div class="container" onclick="toggleClassName(this, 'highlighted')">
  44. <div class="box none">
  45. </div>
  46. </div>
  47. <p>duration: "0s" (should not animate)</p>
  48. <div class="container" onclick="toggleClassName(this, 'highlighted')">
  49. <div class="box one">
  50. </div>
  51. </div>
  52. <p>duration: "0" (should animate since inherits valid duration)</p>
  53. <div class="container" onclick="toggleClassName(this, 'highlighted')">
  54. <div class="box two">
  55. </div>
  56. </div>
  57. </body>
  58. </html>