Bonjour

Alors voilà, je cherche depuis plusieurs heures une réponse sur différents forums (j'ai scruté celui ci pour être honnête) sans trouver ma réponse (du moins, j'ai trouvé des éléments de réponse mais rien ne marche).

Alors voilà, lorsque je clique sur mon image au premier plan , l'animation se déclenche mais repasse directement à son état initial (animation du début, car oui, j'ai également une animation lors de l'ouverture de la page).

J'ai utilisé la fonction :active -> Lorsque je reste appuyé sur le bouton gauche de ma souris, tout est nickel , hors, je veux que cela se passe uniquement sur un clique rapide.

Pareil pour le :hover -> il faut que je laisse mon pointeur dessus sinon l'animation repart au début (si je bouge ne serait-ce que de quelques milimètres).

Voici mon code (généré par Animista, que je recommande également !) avec la fonction :active

.slide-out-right {
	-webkit-animation: slide-out-right 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-out-right 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
}

.Logo:active {
	-webkit-animation: slide-out-right 5s;
	animation: slide-out-right 5s;
	
}

J'ai fais de même pour :hover

Je débute donc je vous demande pardon sur j'utilise les mauvaises appellations, merci pour votre aide !

Frogweb

17 septembre 2018 à 17:53:40

Salut,

animation-fill-mode: forwards fait en sorte que l'animation s’arrête à la fin (et donc ne reviens pas au début).

Ensuite :active c'est le temps pendant lequel tu presse un lien ou un bouton. Donc effectivement si tu n'appuie plus dessus...
Il faut que tu utilise du JS pour une action au clic.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

MoutazCrick

17 septembre 2018 à 18:06:46

Frogweb a écrit:

Ensuite :active c'est le temps pendant lequel tu presse un lien ou un bouton. Donc effectivement si tu n'appuie plus dessus...
Il faut que tu utilise du JS pour une action au clic.

Salut, merci de ta réponse !

En effet, c'était la seule option que je connaissais, mais je me doute que ce n'est pas la plus optimisée.

animation-fill-mode ne répond malheureusement pas à mes attentes

Je vais essayer d'en apprendre plus sur du JS.

Merci encore !

Frogweb

17 septembre 2018 à 18:20:07

Précision, au :hover ton animation ne restera pas à la fin. Elle reviendra forcément au début.

<!DOCTYPE html>
 
<html>
 
<head>
 
    <title></title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 <style>
.anim {
    width:200px;
    background:blue;
    height:100px;
}
.anim.width, .anim:hover {
    animation: couleur-anim 2s forwards;
}
@keyframes couleur-anim {
    0%  {background:blue;}
    100% {background:red; width:400px}
}
</style>
 
<body>
<div class="anim">

</div>
<script>
$(".anim").click(function(){
    $(this).addClass('width');
});
</script>
</body>
</html>

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

OussamaMoufid

26 janvier 2024 à 8:37:59

slide-out-down

Lamecarlate

26 janvier 2024 à 8:53:15

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

Animation au clique/survol

Animer une image sous CSS3

Déterrage

Animation au clique/survol

Animer une image sous CSS3

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs