28111 sujets

CSS et mise en forme, CSS3

[CSS] Continuité d'une transition hover

Bonsoir tout le monde !

J'ai une petite question, et je suis quasiment sûr que cela doit être possible, même si je n’ai rien trouvé sur Internet :

Exemple : J'ai une image qui fait une rotation de 360° avec une transition de 1s lorsqu'elle est survolée.

--> Comment faire pour que lorsqu'elle est survolée, la transition s'effectue en entier, même si l'utilisateur retire la souris de la cible avant les 1s de transition requise pour effectuer le tour complet ?

Voilà, voilà, j'espère avoir été assez clair dans mon exemple.
Merci d'avance !

Cdl,
Flox'
Modifié par flox (18 Jan 2017 - 23:45)
Hélas oui. Au pire, le mieux que vous puissiez faire en CSS seulement serait un retour à l'état initial en plaçant la transition directement sur l'élément et l'état final sur le :hover : CodePen
Hello,

J'avais déjà appliqué ça sur mes transitions Olivier C mais merci quand même !

Du coup si ce n'est possible qu'avec du JS, je me pencherai dessus quand j'aurai une meilleur connaissance dans ce langage Smiley cligne

edit : J'en profite pour balancer les questions sans réponses que j'avais en tête :

- Est-il possible de ciblé une propriété css avec un transition-delay ?
Par exemple, j'aimerais que lorsque que je clique sur ma div A, celle-ci va en left:... et en top:... puis 0.5 secondes plus tard prenne la taille width:... et height:...

- Est-il possible de créer un carré en ne renseignant que la taille d'un seul des côtés avec une valeur relative ?
Par exemple, j'aimerai que ma div ait une hauteur égale à 20% de son container et que sa largeur se fixe automatiquement à la même taille que sa hauteur, avec des unité relatives et non des px. Ca doit se faire en js mais j'me demandais si c'était quand même possible en css ?
Modifié par flox (20 Jan 2017 - 02:08)
flox a écrit :
Est-il possible de cibler une propriété css avec un transition-delay ? Par exemple, j'aimerais que lorsque que je clique sur ma div A, celle-ci va en left:... et en top:... puis 0.5 secondes plus tard prenne la taille width:... et height:...

Moi je le ferais plutôt avec une animation regroupant tout les stades par lesquels doit passer l'élément. Un exemple d'animation :
.el {
    animation: animScale 2s linear infinite;
}
@keyframes animScale {
    0%{
        transform: rotate(0deg); /* facultatif, c'est simplement pour mieux comprendre l'idée */
    }
    50%{
        transform: rotate(180deg);
    }
    100% { 
        transform: rotate(180deg) scale(2);
    } 
}

Pour les déplacements, plutôt que de partir sur des absolus on peut privilégier translateX et translateY.

flox a écrit :
Est-il possible de créer un carré en ne renseignant que la taille d'un seul des côtés avec une valeur relative ?

Sans problème, démonstration ici : Scriptura - Ratios
Le secret est dans padding-bottom :
.ratio {
  width: 100%;
    height: 0;
    padding-bottom: 100%; /* Pour un carré, pour du 16/9 il faudrait cette valeur : 56.25% */
}

Modifié par Olivier C (20 Jan 2017 - 08:48)
Ha !

Content de voir que c'est plutôt simple à faire au final.
Une fois de plus merci beaucoup Olivier !
Sujet clos
Aller à