Partage

Déclencher une animation CSS

Sujet résolu
15 mai 2018 à 9:20:19

Bonjour,

J'ai vu qu'il était possible de déclencher une animation en cliquant sur un lien mais je n'y arrive pas.

J'ai vu beaucoup d’exemple ou c'était possible et je pense avoir fait pareil mais ça ne marche pas. Quelqu'un serait me dire ou je me plante.

Merci du coup de main.

<div id="slides">

                <div class="slide" id="slide1">
                    <a href="#left" class="iconLeft">
                        <i class="fas fa-angle-left"></i>
                    </a>
                    <div class="slideContenu">
                        <h1><strong>Blabla </strong>: LOREM </h1>
                        <p>Lorem !</p>
                        <button class="btn">Plus d'infos</button>
                    </div>
                 </div>
              
                <div class="slide" id="slide2">
                    <div class="iconLeft">
                        <i class="fas fa-angle-left"></i>
                    </div>
                    <div class="slideContenu">
                        <h1><strong>BLABLa</strong>: lorem !</h1>
                        <p>lorem !</p>
                        <button class="btn">Plus d'infos</button>
                    </div>
                    <div class="iconRight">
                        <i class="fas fa-angle-right"></i>
                    </div>
                </div>
        </div>
#left:target #slides{
    animation: animationLeft 10s;

}


@keyframes animationLeft {
    0% {
        transform: translateX(0%);
    }
    
   100% {
        transform: translateX(-100%);
        }
  
   }


-
Edité par NicolasLoh 15 mai 2018 à 9:22:16

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
15 mai 2018 à 9:49:56

Salut,

Si tu veux déclencher quelque chose au clic, il faut te tourner vers le JS dans la plupart des cas, il devait surement y en avoir dans les exemples que tu as pris d'ailleurs.

15 mai 2018 à 10:01:27

salut,

il me semble que l’attribut :active permet justement de faire çà en css. Non?

'Le sanatorium des coïncidences exagérées' == 'Méthode des concordances concomitantes'
15 mai 2018 à 10:17:07

Oui tu peux faire ça, le problème va être de cibler ce que tu veux animer (ici un parent du lien à priori), c'est pour ça que je pense que le JS serait mieux.
15 mai 2018 à 11:31:22

Bonjour,

OlafYansen c'est juste mais il y a des limites, du coup le JS est plutôt bien adapté, il suffit de changer la classe d'un élément HTML pour déclencher l'animation correspondante au css.

15 mai 2018 à 12:15:41

merci à vous d'intervenir alors car je ne connais absolument pas le javascript ^^ (et je le regrette bien)
'Le sanatorium des coïncidences exagérées' == 'Méthode des concordances concomitantes'
15 mai 2018 à 13:54:09

Merci pour vos réponses. En faite c'est pour un des projets du parcourt développeur web junior ou l'on a pas le droit d'utiliser JS.

OlafYansen, j'ai aussi pensé à 'active:' mais ça ne réagis que si on laisse cliqué sur la cible, cela ne déclenche pas de façon définitive.

15 mai 2018 à 18:15:45

Bonjour  NicolasLoh,

L'utilisation de @keyframes{} (animation) est obligatoire ou tu peux faire une transition ?

Découvrez les Css avec la zonecss.fr
15 mai 2018 à 19:32:09

Merci Pipelette, j'est déjà vu ses liens, c'est en partie ça qui m'a fait me dire que c'était possible. 

AliasDmc, avec une transition j'ai le même problème.

Le problème doit venir du fait que je veuille que ce soit un élément enfant indirect qui déclenche une transition sur l'élément parent.

Je doit revoir tout mon html pour que ça passe et du coup avant ça, ça me donne des soucies de positionnement a régler pour que l’effet de slider que je voulais puisse fonctionner.

 Merci à tous pour vos conseils. Je vais chercher une autre piste pour avoir un effet similaire. 

15 mai 2018 à 19:53:04

Bonjour  NicolasLoh,

Vois du coté du sélecteur "~ "


Si tu as la solution,  je suis preneur.

Découvrez les Css avec la zonecss.fr
15 mai 2018 à 20:34:26

De toute façon on ne peu pas cibler des éléments parent, donc remonter dans le document.

16 mai 2018 à 9:41:37

AliasDmc a écrit:

Bonjour  NicolasLoh,

Vois du coté du sélecteur "~ "


Si tu as la solution,  je suis preneur.


C'est pour sélectionner un voisin direct, aucune utilité dans ce cas donc.

Si tu souhaites faire un slider full CSS, je te conseille de repartir d'une autre base en cherchant un exemple sur Google car le ciblage me parait complexe.

Déclencher une animation CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown