tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

updating-animation-on-pseudo-element.html (832B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <style>
      4 @keyframes anim {
      5  from { margin-left: 10em; }
      6  to { margin-left: 10em; }
      7 }
      8 #target::before {
      9  content: 'before';
     10 }
     11 #target.anim::before {
     12  animation: anim 100s infinite;
     13  font-size: 10px;
     14 }
     15 #target.bigger-font::before {
     16  font-size: 20px;
     17 }
     18 </style>
     19 <div id="target"></div>
     20 <script>
     21 addEventListener('DOMContentLoaded', () => {
     22  var target = document.getElementById('target');
     23 
     24  // Start an animation on pseudo element.
     25  target.classList.add('anim');
     26 
     27  requestAnimationFrame(() => {
     28    // The animation on pseudo element should be updated
     29    // when the target element classes are modified.
     30    target.classList.add('bigger-font');
     31 
     32    requestAnimationFrame(() => {
     33      document.documentElement.classList.remove('reftest-wait');
     34    });
     35  });
     36 });
     37 </script>
     38 </html>