Existe-t-il un moyen d'arrêter l'animation de lévitation en survol?

:hover

Voici un lien qui montre l'animation:

https://codepen.io/youbiteme/pen/RprPrN

css animation sass hover transition
0
jricc 21 avril 2017 à 16:46

3 réponses

Meilleure réponse

Ajoutez simplement une pause d'animation à votre survol svg

.svg:hover .shaddow,
.svg:hover .right-movment,
.svg:hover .left-movment,
.svg:hover .leon
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

Stylo mis à jour

0
Pete 21 avril 2017 à 14:11

Vous pouvez essayer ceci pour la lévitation:

.svg:hover .leon {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
    cursor: pointer;
}

Pour tous:

.svg:hover .leon,
.svg:hover .right-movment, .svg:hover .left-movment, .svg:hover  .shaddow {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
    cursor: pointer;
}
0
Peter Mortensen 22 avril 2017 à 00:58 
.leon:hover {
    animation: none;
}

Peut-être ce que vous recherchez.

0
Reality-Torrent 21 avril 2017 à 13:58

De nouvelles questions

3 Pourquoi l'emballage flex-wrap n'est-il pas également?
1 Existe-t-il un moyen d'utiliser le dimensionnement de la boîte: boîte de bordure sans fixation de la largeur?
4 La couleur d'arrière-plan ne s'étend pas sur toute la largeur de l'écran
2 Comment puis-je empêcher le menu hamburger de mon site Web de laisser les gens faire défiler horizontalement
3 Pourcentage CSS de transition (pour la barre de progression)
1 Comment empêcher le contenu de sortir du site Web?
2 Problème de lien entre les blocs de pseudo-éléments
1 Pourquoi l'image à l'intérieur d'un div mis à l'échelle devient-elle plus petite au lieu d'être mise à l'échelle avec son parent?
1 Ajout de plusieurs diaporamas d'images
1 Barre de défilement vers un div dans un conteneur flex
Toutes les questions sur css >

css

CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.

Plus à propos css...