doc_multi_timings.html (4492B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 div { 7 background-color: lime; 8 height: 100px; 9 width: 100px; 10 } 11 12 .cssanimation-normal { 13 animation: cssanimation 1000s; 14 } 15 16 .cssanimation-linear { 17 animation: cssanimation 1000s linear; 18 } 19 20 @keyframes cssanimation { 21 from { 22 opacity: 0; 23 } 24 to { 25 opacity: 1; 26 } 27 } 28 </style> 29 </head> 30 <body> 31 <div class="cssanimation-normal"></div> 32 <div class="cssanimation-linear"></div> 33 <script> 34 "use strict"; 35 36 const duration = 1000000; 37 38 function createAnimation(keyframes, effect, className) { 39 const div = document.createElement("div"); 40 div.classList.add(className); 41 document.body.appendChild(div); 42 effect.duration = duration; 43 div.animate(keyframes, effect); 44 } 45 46 createAnimation({ opacity: [0, 1] }, 47 { delay: 500000, id: "test-delay-animation" }, 48 "delay-positive"); 49 50 createAnimation({ opacity: [0, 1] }, 51 { delay: -500000, id: "test-negative-delay-animation" }, 52 "delay-negative"); 53 54 createAnimation({ opacity: [0, 1] }, 55 { easing: "steps(2)" }, 56 "easing-step"); 57 58 createAnimation({ opacity: [0, 1] }, 59 { endDelay: 500000 }, 60 "enddelay-positive"); 61 62 createAnimation({ opacity: [0, 1] }, 63 { endDelay: -500000 }, 64 "enddelay-negative"); 65 66 createAnimation({ opacity: [0, 1] }, 67 { endDelay: 500000, fill: "forwards" }, 68 "enddelay-with-fill-forwards"); 69 70 createAnimation({ opacity: [0, 1] }, 71 { endDelay: 500000, iterations: Infinity }, 72 "enddelay-with-iterations-infinity"); 73 74 createAnimation({ opacity: [0, 1] }, 75 { direction: "alternate", iterations: Infinity }, 76 "direction-alternate-with-iterations-infinity"); 77 78 createAnimation({ opacity: [0, 1] }, 79 { direction: "alternate-reverse", iterations: Infinity }, 80 "direction-alternate-reverse-with-iterations-infinity"); 81 82 createAnimation({ opacity: [0, 1] }, 83 { direction: "reverse", iterations: Infinity }, 84 "direction-reverse-with-iterations-infinity"); 85 86 createAnimation({ opacity: [0, 1] }, 87 { fill: "backwards" }, 88 "fill-backwards"); 89 90 createAnimation({ opacity: [0, 1] }, 91 { fill: "backwards", delay: 500000, iterationStart: 0.5 }, 92 "fill-backwards-with-delay-iterationstart"); 93 94 createAnimation({ opacity: [0, 1] }, 95 { fill: "both" }, 96 "fill-both"); 97 98 createAnimation({ opacity: [0, 1] }, 99 { fill: "both", delay: 500000, iterationStart: 0.5 }, 100 "fill-both-width-delay-iterationstart"); 101 102 createAnimation({ opacity: [0, 1] }, 103 { fill: "forwards" }, 104 "fill-forwards"); 105 106 createAnimation({ opacity: [0, 1] }, 107 { iterationStart: 0.5 }, 108 "iterationstart"); 109 110 createAnimation({ width: ["100px", "150px"] }, 111 {}, 112 "no-compositor"); 113 114 createAnimation([{ opacity: 0, easing: "steps(2)" }, { opacity: 1 }], 115 {}, 116 "keyframes-easing-step"); 117 118 createAnimation( 119 [ 120 { 121 opacity: 0, 122 offset: 0, 123 }, 124 { 125 opacity: 1, 126 offset: 0.1, 127 easing: "steps(1)", 128 }, 129 { 130 opacity: 0, 131 offset: 0.13, 132 }, 133 ], 134 {}, 135 "narrow-keyframes"); 136 137 createAnimation( 138 [ 139 { 140 offset: 0, 141 opacity: 1, 142 }, 143 { 144 offset: 0.5, 145 opacity: 1, 146 }, 147 { 148 offset: 0.5, 149 easing: "steps(1)", 150 opacity: 0, 151 }, 152 { 153 offset: 1, 154 opacity: 1, 155 }, 156 ], 157 {}, 158 "duplicate-offsets"); 159 160 createAnimation({ opacity: [0, 1] }, 161 { delay: -250000 }, 162 "delay-negative-25"); 163 164 createAnimation({ opacity: [0, 1] }, 165 { delay: -750000 }, 166 "delay-negative-75"); 167 </script> 168 </body> 169 </html>