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!