effect-value-opacity-replaced-effect.html (769B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset=utf-8> 5 <title>The effect value of consecutive animations targeting 'opacity'</title> 6 <link rel="help" href="https://drafts.csswg.org/web-animations/"> 7 <link rel="match" href="effect-value-opacity-replaced-effect-ref.html"> 8 <style> 9 div { 10 width: 100px; 11 height: 100px; 12 background: green; 13 will-change: opacity; 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 <script> 20 'use strict'; 21 22 (async function () { 23 const div = document.querySelector('div'); 24 25 await div.animate({ opacity: [1, 0] }, { duration: 10, fill: 'both' }).finished; 26 await div.animate({ opacity: [0, 1] }, { duration: 10, fill: 'both' }).finished; 27 28 document.documentElement.classList.remove("reftest-wait"); 29 })(); 30 </script> 31 </body> 32 </html>