Run Animation alle 5 Sekunden/Intervall

Question

Ich möchte diesen Text alle 5 Sekunden schütteln, also habe ich versucht, eine Animation in CSS zu implementieren und ein Intervall über jQuery, aber es scheint etwas ist falsch ... und Ideen, was fehlt ? Hier ist eine Geige: https://jsfiddle.net/s909gu2s/1/

.shk { 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    -webkit-animation-name: shake; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay: 0s; 
} 

@keyframes shakeMe { 
    10%, 90% { 
     transform: translate3d(-5px, 0, 0); 
    } 

    20%, 80% { 
     transform: translate3d(5px, 0, 0); 
    } 

    30%, 50%, 70% { 
     transform: translate3d(-5px, 0, 0); 
    } 

    40%, 60% { 
     transform: translate3d(5px, 0, 0); 
    } 
} 

$(document).ready(function() { 
    setInterval(function() { 
     $(".shk").css("animation", "shakeMe"); 
    }, 500); 
}); 

<div class="shk">Shake me</div> 

Answer 1

Sie es mit reinem CSS tun können, benötigt keine JS/jQuery. Um dies zu erreichen, setze ich animation-duration auf 5 Sekunden und multipliziere dann alle Prozentwerte mit 0,2 (weil 1 Sekunde von 5 Sekunden => 20%). Übersetzen Sie dann nach dem höchsten Prozentwert zurück auf 0px. Und voilà, Schütteln alle 5 Sekunden:

.shk { 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    animation-name: shakeMe; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes shakeMe { 
 
    2%, 18% { 
 
     transform: translate3d(-5px, 0, 0); 
 
    } 
 

 
    4%, 16% { 
 
     transform: translate3d(5px, 0, 0); 
 
    } 
 

 
    6%, 10%, 14% { 
 
     transform: translate3d(-5px, 0, 0); 
 
    } 
 

 
    8%, 12% { 
 
     transform: translate3d(5px, 0, 0); 
 
    } 
 
    
 
    18.1% { 
 
     transform: translate3d(0px, 0, 0); 
 
    } 
 
}

<div class="shk">Shake me</div>

Answer 2

Working fiddle.

Zunächst einmal sollten Sie den Namen der Animation shake in den CSS-Regeln anpassen, den Namen matche rechts shakeMe nennen:

.shk { 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    -webkit-animation-name: shake; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay: 0s; 
} 

Dann könnten Sie die Klasse innerhalb des Intervalls schalten Sie den Test alle X ms reanimieren :

$(document).ready(function() { 
    setInterval(function() { 
     $("#target").toggleClass('shk'); 
    }, 500); 
}); 

Hoffe, das hilft.

$(document).ready(function() { 
 
    setInterval(function() { 
 
    $("#target").toggleClass('shk'); 
 
    }, 5000); 
 
});

.shk { 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    -webkit-animation-name: shakeMe; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-delay: 0s; 
 
} 
 

 
@keyframes shakeMe { 
 
    10%, 
 
    90% { 
 
    transform: translate3d(-5px, 0, 0); 
 
    } 
 
    20%, 
 
    80% { 
 
    transform: translate3d(5px, 0, 0); 
 
    } 
 
    30%, 
 
    50%, 
 
    70% { 
 
    transform: translate3d(-5px, 0, 0); 
 
    } 
 
    40%, 
 
    60% { 
 
    transform: translate3d(5px, 0, 0); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="target" class="shk">Shake me</div>