window.addEventListener("mouseover", function(e) { if(e.target.id == "myButtonForward") { var mov = document.getElementById("myButtonForwardc") var options = { iterations: 3, iterationStart: 0, delay: 0, endDelay: 0, duration:300, fill: 'forwards', easing: 'ease-in-out', } var keyframes = [ { transform: 'translateX(0px)' }, { transform: 'translateX(2px)' }, { transform: 'translateX(5px)' }, { transform: 'translateX(2px)' }, { transform: 'translateX(0px)' }, ] mov.animate(keyframes, options) }else if(e.target.id == "myButtonBack") { var movB = document.getElementById("myButtonBackc") var options = { iterations: 3, iterationStart: 0, delay: 0, endDelay: 0, duration:300, fill: 'forwards', easing: 'ease-in-out', } var keyframes = [ { transform: 'translateX(0px)' }, { transform: 'translateX(-2px)' }, { transform: 'translateX(-5px)' }, { transform: 'translateX(-2px)' }, { transform: 'translateX(0px)' }, ] movB.animate(keyframes, options) } });