doc_negative_playback_rate.html (1062B)
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 } 10 </style> 11 </head> 12 <body> 13 <script> 14 "use strict"; 15 16 const DURATION = 100000; 17 const KEYFRAMES = { backgroundColor: ["lime", "red"] }; 18 19 function createAnimation(effect, className, playbackRate = -1) { 20 const div = document.createElement("div"); 21 div.classList.add(className); 22 document.body.appendChild(div); 23 effect.duration = DURATION; 24 effect.fill = "forwards"; 25 const animation = div.animate(KEYFRAMES, effect); 26 animation.updatePlaybackRate(playbackRate); 27 animation.play(); 28 } 29 30 createAnimation({}, "normal"); 31 createAnimation({}, "normal-playbackrate-2", -2); 32 createAnimation({ delay: 50000 }, "positive-delay"); 33 createAnimation({ delay: -50000 }, "negative-delay"); 34 createAnimation({ endDelay: 50000 }, "positive-end-delay"); 35 createAnimation({ endDelay: -50000 }, "negative-end-delay"); 36 </script> 37 </body> 38 </html>