Bond, да обычный setTimeout почитай как он работает, ещё вариант:
<body>
<style>
@keyframes move {
100% { left: 500px; background: #777; }
}
.parent, .bullet {
position: absolute;
top: 0; left: 0;
padding: 10px;
margin: 30px;
border-radius: 50%;
background: #eee;
list-style: none;
cursor: pointer;
}
.bullet {
animation: move 2s linear 2 alternate;
}
.bullet:hover {
animation-play-state: paused;
}
</style>
<script>
var Bullet = (function() {
function Bullet() {
var parent = document.createElement('ul');
parent.classList.add('parent');
parent.textContent = 'Click';
parent.addEventListener('click', this.create.bind(this));
parent.addEventListener('animationend', this.remove.bind(this));
var bullet = document.createElement('li');
bullet.classList.add('bullet');
bullet.textContent = 'Bullet';
this.parent = document.body.appendChild(parent);
this.bullet = bullet;
}
Bullet.prototype.create = function() {
var bullet = this.parent.appendChild(this.bullet.cloneNode(true));
};
Bullet.prototype.remove = function(event) {
var bullet = this.parent.removeChild(event.target);
};
return Bullet;
}());
var bullet = new Bullet();
</script>
</body>