d'animation pour le texte d'entrée ne fonctionne pas dans firefox

Question

HTML:

<input type="text" id="First_Name" autofocus placeholder="First Name" onfocus="this.value = &#39;&#39;;"> 
<label id="Fname" style="color: red;"></label> 

JavaScript:

var firstname = document.getElementById('First_Name'); 
var firstnamevalue = firstname.value.trim(); 
if (firstnamevalue == '') { 
     call=false;   
     shake(firstname);  
} 
function shake (element){ 
     element.style.backgroundColor = '#ffe8e6'; 
     element.classList.add('errorr'); 
     setTimeout(function() { 
      element.classList.remove('errorr'); 
     }, 300);  
     e.preventDefault(); 
} 

CSS:

.errorr { 
    position: relative; 
    animation: shake1 .1s linear; 
    -webkit-animation: shake1 .1s linear; 
    -moz-animation: shake1 .1s linear; 
    -o-animation: shake1 .1s linear; 
    animation-iteration-count: 4; 
    -webkit-animation-iteration-count: 4; 
    -moz-animation-iteration-count: 4; 
    -o-animation-iteration-count: 4; 
} 

@keyframes shake { 
    0% { 
     left: -5px; 
    } 
    100% { 
     right: -5px; 
    } 
}; 
@-webkit-keyframes shake { 
    0% { 
     right: 5px; 
    } 
    0% { 
     left: 5px; 
    } 
}; 
@-moz-keyframes shake { 
    0% { 
     right: 5px; 
    } 
    0% { 
     left: 5px; 
    } 
}; 
@-o-keyframes shake { 
    0% { 
     right: 5px; 
    } 
    0% { 
     left: 5px; 
    } 
}; 

J'ai vérifié ce code d'animation sur l'opéra, chrome et Firefox. Son travail sur le chrome et l'opéra, mais pas dans Firefox. J'ai Firefox 53.0.1. aussi j'ai essayé avec différentes versions de Firefox, non de la version fonctionne. s'il vous plaît répondre dès que possible.

Answer 1

Vous avez une erreur dans les images clés. Dans @keyframes (non-préfixe) vous avez 0% {left: -5px;}, 100% {right: -5px} Dans d'autres (avec préfixe) vous avez deux images-clés, à la fois avec 0%.

Pour une raison quelconque, l'animation avec left et right ne fonctionnera pas dans FF.

Il vaut mieux utiliser une (ou leftright) la propriété et l'animer -5px-5px ou utiliser transform propriété.

Fixed version