<section id="css-keyframes-infinite" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="../../js/components/css-keyframes-infinite.js"></script>
<section id="css-keyframes-infinite" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="{{ path '/js/components/css-keyframes-infinite.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("css-keyframes-infinite active");
    
        const button = document.querySelector('#trigger');
        const box = document.querySelector('#box');
    
        button.addEventListener('click', function() {
          box.classList.toggle('active');
        })
      });
    })();
    
  • URL: /components/raw/css-keyframes-infinite/css-keyframes-infinite.js
  • Filesystem Path: components/01-basic/12-css-keyframes-infinite/css-keyframes-infinite.js
  • Size: 339 Bytes
  • Content:
    @keyframes backAndForth {
      0% {
        transform: none;
        transform-origin: center;
      }
    
      50% {
        transform: translate(-100%, 0);
      }
    
      100% {
        transform: translate(100%, 0) rotate(-180deg);
      }
    }
    
    #css-keyframes-infinite {
      .box {
        transform-origin: center;
    
        &.active {
          animation: 2s backAndForth ease infinite;
        }
      }
    }
    
  • URL: /components/raw/css-keyframes-infinite/css-keyframes-infinite.scss
  • Filesystem Path: components/01-basic/12-css-keyframes-infinite/css-keyframes-infinite.scss
  • Size: 346 Bytes
  • Handle: @css-keyframes-infinite
  • Preview:
  • Filesystem Path: components/01-basic/12-css-keyframes-infinite/css-keyframes-infinite.hbs

No notes defined.