Wiederholen Animation alle 5 Sekunden mit Animate.css

Question

Lassen Sie uns sagen, ich habe dieses HTML:

<a id="btn-shake" class="animated shake" href="#">CONTINUE</a>

und diese CSS:

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

und ich möchte diese Schütteln Animation wiederholen, aber nicht ständig. Ich möchte es einmal schütteln und dann 5 Sekunden warten und es nochmals schütteln und dann 5 Sekunden warten und schütteln usw.

Aber ich weiß nicht wie das geht.

Ist es möglich mit animate.css und reinem css? Wie geht das?

Answer 1

Eine Möglichkeit, dies zu erreichen, wäre, die Verzögerung in die Animation selbst zu integrieren. Etwas wie folgt aus:

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

Der größte Nachteil dieses Ansatzes besteht darin, dass die Prozentsätze sind eng gekoppelt an die Dauern Sie implementieren möchten.

Alternativ kann, wenn Sie mit einer JavaScript-Lösung OK sind, können Sie so etwas wie die folgenden tun könnten:

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

Der Vorteil der JS-Lösung ist, dass Sie eine der Animationen von animate.css steuern unabhängig und leicht die Dauer ändern.

Answer 2

Mit JavaScript könnten Sie auf das Ereignis anamationEnd des Elements warten, die Schüttelanimation entfernen und dann die Schüttelklasse mit einem setTimeout zum Element zurückführen.

Zuerst müssen Sie eine Funktion einrichten, um die verschiedenen Ereignisse der Browser-Animation zu hören.

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

Dann greifen Sie Ihre Taste mit einer Variablen.

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

rufen schließlich das Präfix Ereignis-Listener-Funktion übergeben in der Taste, was Sie hören, und was zu tun ist, wenn das Ereignis aus abfeuert.

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

}); 

Weitere Informationen zu diesem Thema finden Sie unter article.