输入文本的动画在firefox中不起作用

Animation for input text does not work in firefox

本文关键字：firefox 不起作用 动画 文本 输入      更新时间：2023-09-26

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; 
    }
};

我已经检查了opera、chrome和firefox上的动画代码。它适用于铬和歌剧，但不适用于firefox。我有萤火虫45.0.1。我也尝试过不同版本的firefox，没有任何版本的作品。请尽快回复。

关键帧中存在错误。在@keyframes（无前缀）中，有0% {left: -5px;}、100% {right: -5px}在另一个（带前缀）中，有两个关键帧，均为0%。

由于某些原因，left和right的动画在FF中不起作用。

最好只使用一个（left或right）属性，并将其从-5px动画化为5px或使用transform属性。

固定版本

相关文章：