アニメーションは、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; 
    } 
}; 

、クロムとファイアフォックス。 ChromeとOperaで動作しますが、Firefoxでは動作しません。 私はfirefox 45.0.1を持っています。 私はfirefoxのさまざまなバージョンで試していますが、バージョンは動作しません。 できるだけ早く返信してください。

Answer 1

キーフレームにエラーがあります。 @keyframes（接頭辞なし）には0% {left: -5px;},100% {right: -5px} 他の（接頭辞付き）には2つのキーフレームがあり、両方とも0%です。

leftとrightのアニメーションは、FFでは動作しません。

1つだけ（leftまたはright）財産活用だと5pxに-5pxからそれをアニメーション化やtransformプロパティを使用します。

Fixed version