Get started with animsition CDN

MIT licensed

Animation.js is a lightweight library for creating smooth, custom animations.

Tags:
  • css3
  • js
  • animation
  • page transition
  • jQuery

Stable version

Copied!

How to start using animsition CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/animsition/4.0.2/css/animsition.min.css" />
  <script src="https://cdn.cdnhub.io/animsition/4.0.2/js/animsition.min.js"></script>
  <style>
    .animsition-root {
      width: 200px;
      height: 200px;
      background-color: #4caf50;
      margin: 50px auto;
      position: relative;
    }
    .animsition-animate {
      opacity: 0;
      transition: all 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <button id="animate-btn">Animate</button>
  <div class="animsition-root" data-animsition-animation="fade-in" data-animsition-duration="1s">
    <div class="animsition-animate"></div>
  </div>

  <script>
    document.getElementById('animate-btn').addEventListener('click', function() {
      document.querySelector('.animsition-animate').classList.add('animsition-animate-visible');
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions