Get started with animateplus CDN

MIT licensed

AnimatePlus is a library for creating animated CSS transitions and scrolling effects.

Tags:
  • animate
  • animation
  • css
  • svg
  • javascript

Stable version

Copied!

How to start using animateplus CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/animateplus/2.1.1/animateplus.min.js"></script>
</head>
<body>
  <button id="animate-btn">Animate me!</button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const animateBtn = document.getElementById('animate-btn');

      animateBtn.addEventListener('click', () => {
        animate(animateBtn, 1, 0.5)
          .keyframes('my-animation', [
            { opacity: 0.5, transform: 'translateX(-20px)' },
            { opacity: 1, transform: 'translateX(0)' },
          ])
          .start();
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions