Animation CSS onClick

Comment puis-je obtenir un CSS Animation à jouer avec un JavaScript onClick? J'ai actuellement:

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

Comment puis-je appliquer un onClick?

source d'informationauteur tekknolagi | 2011-01-31

  1. 41

    Êtes-vous sûr que vous avez seulement à l'affichage de votre page sur webkit? Voici le code,passé sur safari.
    L'image (id='img') va tourner après le clic sur le bouton.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.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);
  }
}
</style>
<script type="text/javascript">
  function ani(){
    document.getElementById('img').className ='classname';
  }
</script>
<title>Untitled Document</title>
</head>

<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>
  2. 12

    Vous pouvez atteindre cet objectif par la liaison d'un onclick auditeur, et en ajoutant les animer la classe comme ceci:

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

    Vous suffit d'utiliser le :active pseudo-classe. C'est l'ensemble lorsque vous cliquez sur n'importe quel élément.

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

    Essayez ceci:

    <div>
 <p onclick="startAnimation()">Start</p><!--O botão para iniciar (start)-->
 <div id="animation">Hello!</div> <!--O elemento que você quer animar-->
</div>

<style>
@keyframes animationName {
from {margin-left:-30%;}
}
</style>

<script>
function startAnimation() {
    document.getElementById("animation").style.animation = "animationName 2s linear 1";
}
</script>
  5. 0

    Ajouter un 

    -webkit-animation-play-state: paused;

    à votre fichier CSS, vous pouvez contrôler si l'animation est en cours d'exécution ou non à l'aide de cette JS ligne:

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

    si vous souhaitez que l'animation d'exécuter une seule fois, à chaque fois que vous cliquez sur. N'oubliez pas de régler 

    -webkit-animation-iteration-count: 1;
  6. 0

    Vous pouvez le faire en utilisant code suivant

    $('#button_id').on('click', function(){
$('#element_want_to_target').addClass('.animation_class');});