there is a form and a handler on submit :

 form.addEventListener('submit', function(event) { event.preventDefault(); var str = form.elements.text.value.toLowerCase(); if(str != 'строка') { form.elements.text.value = ''; form.elements.text.focus(); form.classList.add('error'); setTimeout(function(){form.classList.remove('error');}, 400); } else { location.replace('http://yandex.ru'); } });

The essence of this code is as follows: if the value of the input at the time of submitting the form does not correspond to a certain line, the form with the animation is hung:

 .error { animation-name: error; animation-duration: .4s; animation-timing-function: linear; } @keyframes error { 0% {left: 50%;} 25% {left: 50.5%;} 50% {left: 50%} 75% {left: 49.5%} 100% {left: 50%} }

At the moment, it is deleted using a timer. Question: How in this case to use the transitionend event? If instead of setTimeout hang on the form

 form.addEventListener('transitionend', function(event) { form.classList.remove('error'); });

Then it just does not work .....

    1 answer 1

    You have animation in your code, so you need to use animation events, which are -

    • animationstart
    • animationend
    • animationiteration
    • animationcancel
    • Thank you, I thought that the transitionend will work after the end of any CSS animation, at least it says so here ..... - pepel_xD
    • It seems to me that what is written relates to animation in general, and not specifically to transition or animation. - user220409