28172 sujets

CSS et mise en forme, CSS3

:hover et sortie de :hover

Salut salut,

Je suis en train de m'amuser avec les transformations et animations CSS3 et je me pose la question suivante : peut on contrôler ce qu'il se passe lorsque l'on sort d'un élément dont on a définit des propriétés CSS avec une pseudo class :hover ?

Je m'explique :

Lorsque ma page se charge, une certaine animation est effectuée sur ma div.
Lorsque je passe ma souris dedans, une autre animation est jouée.
Mais lorsque ma souris sort de cette div, j'aurais aimé avoir l'animation inverse de ce qu'il se passe lors d'un hover. Alors qu'en pratique, c'est mon animation de chargement qui est jouée.


Est-ce possible d'avoir ce comportement (en pur CSS) ?


Merci pour vos lumières Smiley smile
Salut gc-nomade, merci pour ta réponse Smiley cligne

Alors, au chargement de ma page, j'ai une div qui arrive par la droite. Elle a pour particularité d'être orientée vers "l’intérieur de l'écran" grâce à une transformation (rotate) sur l'axe Y.
Lors d'un survole, celle ci se replace parallèlement à l'écran (la rotation revient à 0).

J'aimerais qu'elle retrouve sa valeur de rotation sur Y lorsque la souris en sort.


La structure :


<section id='container'>
    <section id='element_anime' class='ClassAnim'>
        ... contenu divers et varié ...
    </section>
</section>




#container {
    display: table-cell;
}
#element_anime {
    position: relative;
}
@-moz-keyframes AnimChargement {
	0% {
		opacity: 0;
		-moz-transform: perspective(800px) rotateY(-10deg) translateX(2000px);
	}
	
	100% {
                opacity: 1;
		-moz-transform: perspective(800px) rotateY(-10deg) translateX(0);
	}
}
@-moz-keyframes AnimHover {
	0% {
		-moz-transform: perspective(800px) rotateY(-10deg)
	}
	100% {
		-moz-transform: perspective(800px) rotateY(0deg);
	}
}
.ClassAnim {
	-moz-animation-name: AnimChargement ;
}
.ClassAnim:hover {
	-moz-animation-name: AnimHover ;
}


Voila globalement ce que j'ai.
re,

ta base risque de ne pas fonctionné, pas de timing ?

et perspective, ça se passe sur le parent avec transform-style et plus dans transform .
parent {
transform-style:preserve-3d; /* ou flat */
perspective:400px;
}
enfant {
transform:rotateY(xxdeg);
}


Fait en sorte que tes style CSS3 fonctionnent bien , avant de les tester dans une animation Smiley smile

++
Yop !

Tout fonctionne pour le moment gc-nomade, il y a juste la sortie du :hover que j'aimerais pouvoir contrôler.

a écrit :
et perspective, ça se passe sur le parent avec transform-style et plus dans transform .


Je suis parti d'une bibliothèque d'anim css, et puisque ça fonctionne je ne me suis pas posé de question.

a écrit :
Fait en sorte que tes style CSS3 fonctionnent bien , avant de les tester dans une animation


Ben justement, ça fonctionne Smiley lol
Sauf la sortie du hover, tu penses que c'est une coquille de ma part et non pas le comportement par défaut?
Modifié par The_Moye (13 Jul 2012 - 20:47)
Non? Ce n'est pas le comportement par défaut? L'animation devrait bien se jouer dans le sens inverse?
Sujet clos
Aller à