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

我在opera，chrome和firefox上检查过这段动画代码。它在chrome和opera上工作但不在firefox中。我有firefox 45.0.1。我也试过不同版本的firefox，非版本的作品。请尽快回复。

Answer 1

关键帧中有错误。在@keyframes（无前缀）中，您有0% {left: -5px;}，100% {right: -5px} 在其他（带前缀）中，您有两个关键帧，都有0%。

由于某些原因，left和right的动画无法在FF中使用。

最好只使用一个（left或right）属性，并将其设置为-5px到5px或使用transform属性。

Fixed version

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

1 个答案: