By clicking on the first element, the animation = "move 5s"; style is added animation = "move 5s"; . How to get a callback at the end of css animation to nullify the style? You can drop the modifier in the form of a class that has styles, or it can be reset via an attribute and then reset, but how to get a callback ?

PS: For the sake of clarity, I reset the style via setTimeout .

 function getId(id) { return document.getElementById(id); } function getStyle(elem) { return getComputedStyle(elem); } function setStyle(elem) { return elem.style; } let firstElem = getId("first"); firstElem.addEventListener('click', function() { setStyle(firstElem).animation = "move 5s"; setTimeout(function() { setStyle(firstElem).animation = "none"; }, 5000); }); 
 body { background: #3B3738; padding: 10px; } .elem { position: relative; text-align: center; font-weight: bold; font-size: 18px; text-transform: uppercase; padding: 20px; background: #512; width: 150px; box-shadow: inset 0 0 0 1px #000; //animation: move 5s; left: 0; margin-bottom: 10px; &:not(:last-child) { margin-bottom: 10px; } } @keyframes move { 50% { left: 100%; transform: translateX(-100%); } } 
 <div class="elem" id="first">First</div>

  • one
    Alas, there is no kossback for css animation. only through setTimeout - Alexander Slepenkov

2 answers 2

There are two events that are triggered after the completion of the animation, you can bind to them.

1) transitionend - triggered when the CSS transition property finishes its execution

2) animationend - it works when the CSS animation property finishes its execution, respectively.

  • Thanks, it partially helps me, but here only the transition property is tracked, and I animated through @keyframes and animate . - Acne Black
  • There is also an animationend - Dmytryk
  • write this back and I will mark it. thank you. - Acne Black
  • supplemented the answer. - Dmytryk

In order to be able to call a callback after the function completes, you can use requestAnimationFrame . For example:

 function getId(id) { return document.getElementById(id); } let firstElem = getId("first"); firstElem.onclick = function() { animate(function(timePassed) { firstElem.style.left = timePassed / 5 + 'px'; }, 2000); }; // РисуСт функция draw // ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ duration function animate(draw, duration) { var start = performance.now(); requestAnimationFrame(function animate(time) { // ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, сколько ΠΏΡ€ΠΎΡˆΠ»ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ с Π½Π°Ρ‡Π°Π»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ var timePassed = time - start; // Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ нСбольшоС ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π² этом случаС Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ† if (timePassed > duration) timePassed = duration; // Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ timePassed draw(timePassed); // Ссли врСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π΅ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΎΡΡŒ - Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΊΠ°Π΄Ρ€ if (timePassed < duration) { requestAnimationFrame(animate); } else { //ΠΈΠ½Π°Ρ‡Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ сообщСниС Ρ‡Ρ‚ΠΎ анимация Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»Π°ΡΡŒ //ΠΈΠ»ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΊΠΎΠΉ Π½ΠΈΠ±ΡƒΠ΄ΡŒ callback firstElem.style.left = 0 alert('анимация Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°') } }); } 
 body { background: #3B3738; padding: 10px; } .elem { position: relative; text-align: center; font-weight: bold; font-size: 18px; text-transform: uppercase; padding: 20px; background: #512; width: 150px; box-shadow: inset 0 0 0 1px #000; //animation: move 5s; left: 0; margin-bottom: 10px; } 
 <div class="elem" id="first">First</div>

Read more in the tutorial about js-animation , still here and here .

  • Thanks, but I worked specifically with css animation, or rather with animation: move 5s; . In this example, I add styles via js, but in the future I will be a class, but the point here is to get a callback at the end of the css animation, rather than animate through requestAnimationFrame . Below is the answer, but it only tracks the transition property. - Acne Black