Gibt es eine Möglichkeit, CSS-Keyframe-Animation mit JS auszulösen?

Question

Natürlich können wir eine CSS-Animation mit Keyframes erstellen und von dort aus steuern.

jedoch im Idealfall würde Ich mag diese Animation von einem Button-Klick auslösen - so würde die Schaltfläche klicken ein Ereignis sein ...

@keyframes fade-in { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

nun auf Klick, ich mag diese Animation auszulösen; im Gegensatz zu der CSS-Animationseigenschaft.

Answer 1

siehe hier jsfiddle

, wenn Sie Ihre Animation wollen jedes Mal, wenn Sie die Taste, um diesen Code zu verwenden, drücken Sie arbeiten:

$('button').click(function() { 
    $(".fademe").addClass('animated'); 
    setTimeout(function() { 
     $(".fademe").removeClass('animated'); 
    }, 1500); 
}); 

wo 1500 das ist animation-duration in diesem Fall 1.5s

CSS-Code:

.fademe { 
    width:100px; 
    height:100px; 
    background:red; 
} 

.fademe.animated { 
    animation:fade-in 1.5s ease; 
} 


@keyframes fade-in { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

HTML:

<div class="fademe"> </div> 

<button>CLICK ME</button> 

ERKLÄRUNG:

1. auf Klick auf den Button animated Klasse hinzufügen (oder jede andere Klasse) mit dem Element, das Sie möchte die Animation anwenden, .fademe
2. machen eine setTimeout(function() die removeClass für die Dauer der Animation der Deklaration der Animation 1.5s oder 1500ms
3. Schreib in CSS zu verzögern, @keyframes, und fügen Sie es mit der Klasse auf das Element durch die .fademe.animated

JQ hinzugefügt

Answer 2

$("#move-button").on("click", function(){ 
 
    $("#ship").removeClass("moving"); 
 
    $("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth; 
 
    $("#ship").addClass("moving"); 
 
});//

#ship 
 
{ 
 
    background: green; 
 
    color: #fff; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    text-align: center; 
 
    width: 100px; 
 
} 
 

 
#move-button 
 
{ 
 
    margin-top: 20px; 
 
} 
 

 
#ship.moving 
 
{ 
 
    animation: moving 2s ease; 
 
} 
 

 
@keyframes moving 
 
{ 
 
    0%{ transform: translate(0px);} 
 
    50%{ transform: translate(20px);} 
 
    100%{ transform: translate(0px);} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="ship">Ship</div> 
 
<button id="move-button">Push</button>