반복 애니메이션 Animate.css

Question

를 사용하여 매 5 초의 내가이 HTML 있다고 가정 해 봅시다

a#btn-shake { 
    width: 200px; 
    height: 40px; 
    clear: both; 
    display: inline-block; 
    margin: 0px auto; 

    animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    -webkit-animation-duration: 1s; 

    animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    -webkit-animation-delay: 1s; 

    animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
} 

을하고 나는이 동요 애니메이션을 반복 할 수 있지만 연방. 한 번 흔들어 5 초 동안 기다렸다가 다시 흔들어서 5 초 동안 기다렸다가 흔들어서 흔들기를 원합니다.

하지만 그 방법을 모르겠습니다.

animate.css 및 pure css로 가능합니까? 그렇게하는 방법?

Answer 1

이것을 달성하는 한 가지 방법은 애니메이션 자체에 지연을 만드는 것입니다. 다음과 같은 것 :

a#btn-shake { 
    width: 200px; 
    height: 40px; 
    clear: both; 
    display: inline-block; 
    margin: 0px auto; 

    animation-name: shake-with-delay; 
    animation-duration: 6s; 
    animation-iteration-count: infinite; 
} 

@keyframes shake-with-delay { 
    from, 16%, to { 
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 
    1.6%, 4.8%, 8%, 11.2%, 14.4% { 
     -webkit-transform: translate3d(-10px, 0, 0); 
     transform: translate3d(-10px, 0, 0); 
    } 
    3.2%, 6.4%, 9.6%, 12.8% { 
     -webkit-transform: translate3d(10px, 0, 0); 
     transform: translate3d(10px, 0, 0); 
    } 
} 

이 접근법의 가장 큰 단점은 비율을 구현하려는 기간과 밀접하게 결합한다는 것입니다.

또는, 당신은 자바 스크립트 솔루션을 확인하는 경우는 다음과 같은 일을 할 수있는 :

function doAnimation(id, animName, duration, delay) { 
    var el = document.getElementById(id); 
    var timer; 
    function addClass() { 
     el.classList.add(animName); 
    } 
    function removeClass() { 
     el.classList.remove(animName); 
    } 
    setInterval(function() { 
     clearTimeout(timer); 
     addClass(); 
     timer = setTimeout(removeClass, duration); 
    }, duration + delay); 
} 

doAnimation('btn-shake', 'shake', 1000, 5000); 

JS 솔루션의 장점은 당신이 animate.css에서 애니메이션 중 하나를 제어 할 수 있다는 것입니다

독립적으로 그리고 쉽게 지속 시간을 변경할 수 있습니다.

Answer 2

JavaScript를 사용하면 실행하려는 요소의 anamationEnd 이벤트를 수신하고 흔들기 애니메이션을 제거한 다음 흔들림 클래스를 setTimeout을 사용하여 요소에 다시 추가 할 수 있습니다.

먼저 다른 브라우저 애니메이션 끝 이벤트를 수신하는 기능을 설정해야합니다.

var pfx = ["webkit", "moz", "MS", "o", ""];  
function prefixedEventListener(element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.addEventListener(pfx[p]+type, callback, false); 
    } 
} 

그런 다음 변수를 사용하여 단추를 잡으십시오.

var btnShake = document.querySelector("#btnShake"); 

마지막으로 프리픽스 이벤트 리스너 함수를 단추에 전달하고, 듣고있는 내용과, 이벤트가 발생하면 수행 할 작업을 호출하십시오.

prefixedEventListener(btnShake ,"AnimationEnd",function(e){ 
    btnShake.classList.remove("shake"); 
    setTimeout(function(){btnShake.classList.add("shake");}, 5000); 

}); 

이 주제에 대한 자세한 내용은 article을 참조하십시오.