CSS-Animation onClick

Question 1

Wie kann ich eine CSS-Animation mit einem JavaScript-onClick zum Abspielen bringen? Ich habe derzeit:

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

Wie kann ich einen onClick anwenden?

Question 2

Sind Sie sicher, dass Sie Ihre Seite nur im Webkit anzeigen? Hier ist der Code, der auf Safari weitergegeben wurde. Das Bild (id='img') dreht sich nach dem Klicken auf die Schaltfläche.

function ani() {
  document.getElementById('img').className="classname";
}

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

<input name="" type="button" onclick="ani()" value="Click">
<img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" />

Question 3

Sie verwenden einfach die :active Pseudo-Klasse. Dies wird gesetzt, wenn Sie auf ein beliebiges Element klicken.

.classname:active {
    /* animation css */
}

Question 4

Lösung gefunden auf CSS-Tricks

const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation

Question 5

Sie können dies erreichen, indem Sie einen Onclick-Listener binden und dann die animierte Klasse wie folgt hinzufügen:

$('#button').onClick(function(){
    $('#target_element').addClass('animate_class_name');
});

Question 6

NUR CSS-Lösung, die bei jedem Klick funktioniert und die Animation bis zum Ende abspielt:

Alles, was Sie tun müssen, ist, die Animation zum hinzuzufügen :focus Pseudo-Klasse und setzen Sie sie auf none in :active Pseudo-Klasse.

Wenn Ihr Element nicht fokussierbar ist, fügen Sie es hinzu tabindex="0" Attribut zum HTML-Element:

@keyframes beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(0.8,0.8);
            transform: scale(0.8, 0.8);
  }
}
.className {
  background-color:#07d;  
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  padding: 20px;
  margin:5px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.className:focus {
  -webkit-animation: beat 1s ease-in-out backwards;
          animation: beat 1s ease-in-out backwards;
}
.className:active {
  -webkit-animation: none;
          animation: none;
}
body {
  text-align: center;
}

<h3>Any element with tabindex="0", like a div:</h3>
<div tabindex="0" class="className"> Click me many times!</div>
<h3>Any focusable element like a button:</h3>
<button class="className"> Click me many times!</button>

Question 7

var  abox = document.getElementsByClassName("box")[0];
function allmove(){
        abox.classList.remove("move-ltr");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move");
}
function ltr(){
        abox.classList.remove("move");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move-ltr");
}
function ttb(){
       abox.classList.remove("move-ltr");
       abox.classList.remove("move");
       abox.classList.toggle("move-ttb");
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
.move{
  -webkit-animation: moveall 5s;
  animation: moveall 5s;
}
.move-ltr{
   -webkit-animation: moveltr 5s;
  animation: moveltr 5s;
}
.move-ttb{
    -webkit-animation: movettb 5s;
  animation: movettb 5s;
}
@keyframes moveall {
  0%   {left: 0px; top: 0px;}
  25%  {left: 200px; top: 0px;}
  50%  {left: 200px; top: 200px;}
  75%  {left: 0px; top: 200px;}
  100% {left: 0px; top: 0px;}
}
@keyframes moveltr {
  0%   { left: 0px; top: 0px;}
  50%  {left: 200px; top: 0px;}
  100% {left: 0px; top: 0px;}
}
@keyframes movettb {
  0%   {left: 0px; top: 0px;}
  50%  {top: 200px;left: 0px;}
  100% {left: 0px; top: 0px;}
}

<div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>

Question 8

Füge hinzu ein

-webkit-animation-play-state: paused;

zu Ihrer CSS-Datei hinzufügen, können Sie mit dieser JS-Zeile steuern, ob die Animation ausgeführt wird oder nicht:

document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";

wenn Sie möchten, dass die Animation bei jedem Klick einmal ausgeführt wird. Denken Sie daran, einzustellen

-webkit-animation-iteration-count: 1;