CSS Animation onClick
Comment puis-je obtenir une Animation CSS pour jouer avec un clic JavaScript? 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 appliquer un onClick?
6 réponses
Êtes-vous sûr que vous n'affichez que votre page sur webkit? Voici le code,passé en safari.
L'image (id='img') tournera après le clic de 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>
Vous pouvez y parvenir en liant un écouteur onclick et en ajoutant ensuite la classe animate comme ceci:
$('#button').onClick(function(){
$('#target_element').addClass('animate_class_name');
});
vous utilisez juste le :active pseudo-classe. Ce paramètre est défini lorsque vous cliquez sur un élément.
.classname:active {
/* animation css */
}
Ajouter un
-webkit-animation-play-state: paused;
à votre fichier CSS, alors vous pouvez contrôler si l'animation est en cours d'exécution ou non en utilisant cette ligne JS:
document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";
si vous voulez que l'animation s'exécute une fois, chaque fois que vous cliquez. N'oubliez pas de régler
-webkit-animation-iteration-count: 1;
essaye 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>
Vous pouvez faire cela en utilisant le code suivant
$('#button_id').on('click', function(){
$('#element_want_to_target').addClass('.animation_class');});