.animation-block { width: 50px; height: 50px; background: red; margin-top: 200px; animation: up 1s linear, down 1.5s linear 1s; } @keyframes up { 0% { transform: translateY(0px); } 50% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } @keyframes down { 0% { transform: translateY(0px); } 50% { transform: translateY(100px); } 100% { transform: translateY(0px); } }<div ></div>var box = document.querySelector('.animation-block');var i = 0box.addEventListener("webkitAnimationEnd", function() { i++ if (i == 2) { i = 0 box.classList.remove('animation-block'); setTimeout(function() { box.classList.add('animation-block'); }, 0) }}, false);