Comment éviter de rappeler mon animation css après avoir utilisé le sélecteur ': active'?

J'ai trouvé une solution à ce problème d ' animation . Je ne sais pas si ça marche pour toi. Mais j'ai trouvé quelques coding problèmes dans votre Jsfiddle .

Premier problème de codage.

Vous n'avez pas appliqué les règles du W3C . button est un élément de fermeture tag. Ce n'est pas un élément de fermeture tag comme <img /> <br /> etc.

Deuxième problème de codage.

Vous devez oublier d'écrire la propriété position direction CSS. position: fixed | absolute | sticky doit définir la direction left | right | top | bottom.

J'ai testé votre violon plusieurs fois pourquoi :active pseudo-class ne fonctionne pas après clicked. Problème détecté lors de votre premier animation. animation et bounceInDown classes contiennent la propriété transform. Votre animation ne fonctionnera pas tant que vous n'aurez pas supprimé animation et bunceInDown classes. Je dois donc écrire un function pour supprimer ces classes.

$(function(){
    $('#button').on('click', function(){
        $(this).removeClass('animated bounceInDown');
    });
});

Lorsque j'ai supprimé ces classes, le bouton que j'ai vu a disparu car #button opacity: est 0;. J'ai donc besoin de opacity: 1; dans #button.

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('opacity-visible');
    });
});

Maintenant trouvé un autre problème. Le problème est le premier click :active animation ne fonctionne pas. En raison du premier click, la propriété transform n'a pas été autorisée tant que animation classes n'est pas supprimé. Ensuite, vous devez ajouter un class lors de la suppression de ces animation classes. Après avoir ajouté un nouveau class, le :active animation fonctionnera.

$(function(){
    $('#button').on('click', function(){
        $(this).addClass('active');
    });
});

Vous devez maintenant définir un timeOut function pour supprimer le active class pour button revenir à son emplacement d'origine pour la prochaine clicked animation . Maintenant, je peux tout écrire function ensemble.

$(function(){
    $('#button').on('click', function(){
    $(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
        $('#button').removeClass('active');
    }, 2000);
  });
});

Vérifié le coupé. J'espère que cela vous aidera à trouver la meilleure solution.

setTimeout( function(){
$("#button").addClass("animated bounceInDown");
}, 1000);

$(function(){
	$('#button').on('click', function(){
  	$(this).addClass('active opacity-visible');
    $(this).removeClass('animated bounceInDown');
    setTimeout(function(){
    	$('#button').removeClass('active');
    }, 2000);
  });
});

*:focus{
    outline: none !important;
}
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
#button {
  position: fixed;
  background-color: green;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  height: 20%;
  left: 0;
  width: 20%;
  top: 0;
  opacity: 0;
}

#button:active{
  background-color: red;
  transform: translateX(50%) !important;
 /* animation-name: not_existing_animation; */
}
#button.opacity-visible{
  opacity: 1;
  transition: transform 0.3s ease-in-out 0s;
}
#button.active{
  background-color: black;
  transform: translateX(50%) !important;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.bounceInDown {
  animation-name: bounceInDown;
  opacity: 1!important;
}


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

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

  to {
    transform: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Click Me</button>

Je vous suggère de ne pas écrire :active css pour ce type de animation. Plus de spécifications ici sur MDN.