doc_multi_keyframes.html (4448B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 div { 7 width: 50px; 8 height: 50px; 9 } 10 </style> 11 </head> 12 <body> 13 <script> 14 "use strict"; 15 16 function createAnimation(name, keyframes, effectEasing) { 17 const div = document.createElement("div"); 18 div.classList.add(name); 19 document.body.appendChild(div); 20 21 const effect = { 22 duration: 100000, 23 fill: "forwards", 24 }; 25 26 if (effectEasing) { 27 effect.easing = effectEasing; 28 } 29 30 div.animate(keyframes, effect); 31 } 32 33 createAnimation( 34 "multi-types", 35 [ 36 { 37 backgroundColor: "red", 38 backgroundRepeat: "space round", 39 fontSize: "10px", 40 marginLeft: "0px", 41 opacity: 0, 42 textAlign: "right", 43 transform: "translate(0px)", 44 }, 45 { 46 backgroundColor: "lime", 47 backgroundRepeat: "round space", 48 fontSize: "20px", 49 marginLeft: "100px", 50 opacity: 1, 51 textAlign: "center", 52 transform: "translate(100px)", 53 }, 54 ] 55 ); 56 57 createAnimation( 58 "multi-types-reverse", 59 [ 60 { 61 backgroundColor: "lime", 62 backgroundRepeat: "space", 63 fontSize: "20px", 64 marginLeft: "100px", 65 opacity: 1, 66 textAlign: "center", 67 transform: "translate(100px)", 68 }, 69 { 70 backgroundColor: "red", 71 backgroundRepeat: "round", 72 fontSize: "10px", 73 marginLeft: "0px", 74 opacity: 0, 75 textAlign: "right", 76 transform: "translate(0px)", 77 }, 78 ] 79 ); 80 81 createAnimation( 82 "middle-keyframe", 83 [ 84 { 85 backgroundColor: "red", 86 backgroundRepeat: "space", 87 fontSize: "10px", 88 marginLeft: "0px", 89 opacity: 0, 90 textAlign: "right", 91 transform: "translate(0px)", 92 }, 93 { 94 backgroundColor: "blue", 95 backgroundRepeat: "round", 96 fontSize: "20px", 97 marginLeft: "100px", 98 opacity: 1, 99 textAlign: "center", 100 transform: "translate(100px)", 101 }, 102 { 103 backgroundColor: "lime", 104 backgroundRepeat: "space", 105 fontSize: "10px", 106 marginLeft: "0px", 107 opacity: 0, 108 textAlign: "right", 109 transform: "translate(0px)", 110 }, 111 ] 112 ); 113 114 createAnimation( 115 "steps-keyframe", 116 [ 117 { 118 backgroundColor: "red", 119 backgroundRepeat: "space", 120 fontSize: "10px", 121 marginLeft: "0px", 122 opacity: 0, 123 textAlign: "right", 124 transform: "translate(0px)", 125 easing: "steps(2)", 126 }, 127 { 128 backgroundColor: "lime", 129 backgroundRepeat: "round", 130 fontSize: "20px", 131 marginLeft: "100px", 132 opacity: 1, 133 textAlign: "center", 134 transform: "translate(100px)", 135 }, 136 ] 137 ); 138 139 createAnimation( 140 "steps-effect", 141 [ 142 { 143 opacity: 0, 144 }, 145 { 146 opacity: 1, 147 }, 148 ], 149 "steps(2)" 150 ); 151 152 createAnimation( 153 "steps-jump-none-keyframe", 154 [ 155 { 156 easing: "steps(5, jump-none)", 157 opacity: 0, 158 }, 159 { 160 opacity: 1, 161 }, 162 ] 163 ); 164 165 createAnimation( 166 "narrow-offsets", 167 [ 168 { 169 opacity: 0, 170 }, 171 { 172 opacity: 1, 173 easing: "steps(2)", 174 offset: 0.1, 175 }, 176 { 177 opacity: 0, 178 offset: 0.13, 179 }, 180 ] 181 ); 182 183 createAnimation( 184 "duplicate-offsets", 185 [ 186 { 187 opacity: 1, 188 }, 189 { 190 opacity: 1, 191 offset: 0.5, 192 }, 193 { 194 opacity: 0, 195 offset: 0.5, 196 }, 197 { 198 opacity: 1, 199 offset: 1, 200 }, 201 ] 202 ); 203 204 createAnimation( 205 "same-color", 206 [ 207 { 208 backgroundColor: "lime", 209 }, 210 { 211 backgroundColor: "lime", 212 }, 213 ] 214 ); 215 216 createAnimation( 217 "currentcolor", 218 [ 219 { 220 backgroundColor: "currentColor", 221 }, 222 { 223 backgroundColor: "lime", 224 }, 225 ] 226 ); 227 </script> 228 </body> 229 </html>