web-dev-qa-db-fra.com

Exécuter l'animation CSS3 une seule fois (au chargement de la page)

Je fais une simple page de destination pilotée par CSS3. Pour le rendre génial, il y a un <a> faire le plein:

@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

Et pour le rendre encore plus génial, j'ai ajouté une animation de survol:

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

Mais voici le problème! J'ai assigné les animations comme ceci:

a {
    /* Some basic styling here */

    animation: splash 1s normal forwards ease-in-out;
}
a:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

Tout fonctionne très bien: le <a> éclabousse le visage de l'utilisateur et a une belle vibration lorsqu'il le survole. Bit dès que l'utilisateur brouille le <a> les trucs lisses se terminent brusquement et le <a> répète l'animation splash-. (Ce qui est logique pour moi, mais je ne le veux pas)

csscss3css-animations
45
buschtoens

Après des heures de recherche sur Google: Non, ce n'est pas possible sans JavaScript. Le animation-iteration-count: 1; est enregistré en interne dans l'attribut animation shothand, qui obtient réinitialisé et remplacé le :hover. Quand on brouille le <a> et relâchez le :hover l'ancienne classe réapplique et donc à nouveau réinitialise l'attribut animation.

Il n'y a malheureusement aucun moyen de sauvegarder certains états d'attribut dans les états d'élément.

Vous devrez utiliser JavaScript.

27
buschtoens

Si je comprends bien que vous voulez lire l'animation sur A seulement une fois que vous devez ajouter

animation-iteration-count: 1

au style pour le a.

23
Strelok

Cela peut être fait avec un peu de surcharge supplémentaire.

Enveloppez simplement votre lien dans un div et séparez l'animation.

le html ..

<div class="animateOnce">
    <a class="animateOnHover">me!</a>
</div>

.. et le css ..

.animateOnce {
    animation: splash 1s normal forwards ease-in-out;
}

.animateOnHover:hover {
    animation: hover 1s infinite alternate ease-in-out;
}
19
Butsuri

Je viens de le faire fonctionner sur Firefox et Chrome. Vous ajoutez/supprimez simplement la classe ci-dessous en fonction de vos besoins.

.animateOnce {
  -webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
  -moz-animation:    NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
  -o-animation:      NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
18
Ricardus

Le code suivant sans "iteration-count: 1" entraînait la pulsation de tous les éléments de ligne après la saisie, jusqu'au dernier élément chargé, même si 'Pulse n'était pas utilisé.

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>


<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
0
happyjjd

Pour la requête ci-dessus, appliquez ci-dessous CSS pour un

animation-iteration-count: 1
0
Nagnath Mungade