101 Ways to Animate Things

Use CSS Keyframes and the Animation Property 

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

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

<script src="../../js/components/css-keyframes.js"></script>
 
<section id="css-keyframes" 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.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("css-keyframes active");

    const button = document.querySelector('#trigger');
    const box = document.querySelector('#box');

    button.addEventListener('click', function() {
      box.classList.add('active');
    })
  });
})();
  • URL: /components/raw/css-keyframes/css-keyframes.js
  • Filesystem Path: components/01-basic/10-css-keyframes/css-keyframes.js
  • Size: 327 Bytes
  • Content: 
    @keyframes demoSample {
  0% {
    transform: none;
  }

  25% {
    transform: translate(25%, 35%);
  }

  50% {
    transform: rotate(400deg) translate(25%, 35%);
  }

  75% {
    transform: scale(2, 2) rotate(400deg) translate(25%, 35%);
  }

  100% {
    transform: scale(1, 1) rotate(-400deg) translate(0, 100%);
  }
}

#css-keyframes {
  .box {
    &.active {
      transform-origin: center center;
      animation: 3s demoSample ease-in-out;
    }
  }
}
  • URL: /components/raw/css-keyframes/css-keyframes.scss
  • Filesystem Path: components/01-basic/10-css-keyframes/css-keyframes.scss
  • Size: 461 Bytes

No notes defined.