AnimIt － demo1

cube

by b1ncer

HTML

<script src="https://npmcdn.com/[email protected]/dist/anim-it.js"></script>
<div id="cube" class="cube"></div>

CSS

.cube {
	width: 40px;
	height: 40px;
	border-radius: 20%;
	background-color: gray;
	position: absolute;
	opacity: 1;
	margin: 40px;
}

JavaScript

var el = document.getElementById('cube');

var animation = AnimIt({
	target: el.style,
	setter: {
		opacity: new AnimIt.tweenNumber({
			from: Number(window.getComputedStyle(el).opacity),
			to: 0.2,
			curve: AnimIt.outBack
		})
	},
	delay: 1000,
	duration: 1000
});

animation();