CODEWITHSUNDEEP
javascriptcss
Pranesh
Pranesh

Reputation: 71

Animation for input text does not work in firefox

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

I have checked this code of animation on opera, chrome and firefox. Its working on chrome and opera but not in firefox . I have firefox 45.0.1. also i have tried with different versions of firefox , non of the version works. please reply as soon as possible.

Upvotes: 0

Views: 58

Answers (1)

Aleksandr Petrov
Aleksandr Petrov

Reputation: 1288

You have error in keyframes. In @keyframes (no-prefix) you have 0% {left: -5px;}, 100% {right: -5px} In other (with-prefix) you have two keyframe, both with 0%.

For some reason animation with left and right will not work in FF.

It's better use only one (left or right) property and animate it from -5px to 5px or use transform property.

Fixed version

Upvotes: 1

Related Questions