animations-shadow-print.html (901B)
1 <!DOCTYPE HTML> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-animations/"> 4 <link rel="match" href="animations-shadow-print-ref.html"> 5 <title>Static CSS animation in Shadow DOM</title> 6 <style> 7 8 @keyframes a { 9 from, to { color: blue } 10 } 11 12 .anim { 13 color: olive; 14 animation: a 1s infinite; 15 } 16 17 </style> 18 <p class="anim">blue with animation support; olive without</p> 19 <div id="holder"></div> 20 <script> 21 let shadow_style = style = document.createElement("style"); 22 shadow_style.textContent = "@keyframes shadow_a { from, to { color: orange } }"; 23 24 let shadow = document.getElementById("holder").attachShadow({mode:"open"}); 25 let shadow_p = document.createElement("p"); 26 27 shadow_p.style.color = "olive"; 28 shadow_p.style.animation = "shadow_a 1s infinite"; 29 shadow_p.innerHTML = "orange with animation support; olive without"; 30 shadow.appendChild(shadow_style); 31 shadow.appendChild(shadow_p); 32 </script>