HTML :
<input type="text" id="First_Name" autofocus placeholder="First Name" onfocus="this.value = '';">
<label id="Fname" style="color: red;"></label>
자바 스크립트 :
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;
}
};
오페라, 크롬 및 파이어 폭스 에서이 애니메이션 코드를 확인했습니다. 크롬과 오페라에서 작동하지만 파이어 폭스에서는 작동하지 않습니다. firefox 45.0.1이 있습니다. 또한 다른 버전의 firefox로 시도했지만 버전이 작동하지 않습니다. 가능한 한 빨리 회신 해주십시오.
키 프레임에 오류가 있습니다. 에서 @keyframes(노 접두사) 당신이 0% {left: -5px;}, 100% {right: -5px}당신은 두 개의 키 프레임, 모두가 다른 (와 접두사)에서 0%.
몇 가지 이유 애니메이션 left과 rightFF에서 작동하지 않습니다.
하나의 ( left또는 right) 속성 만 사용하고 속성 을 -5pxto 5px또는 사용하는 것이 좋습니다 transform.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다