28172 sujets

CSS et mise en forme, CSS3

CSS3 transition : ne pas revenir à l'état initiale après hover

Bonjour à tous Smiley smile

Après moult recherches sur le net, je n'ai pas trouvé de solution à ce problème qui pourtant ne doit pas être isolé :

J'ai rajouté la propriété Css3 transition aux icones de mon menu pour dynamiser un peu la navigation. Lorsqu'on passe la souris sur les liens, l'icone effectue une rotation de 360deg du plus bel effet. Cependant, lorsqu'on retire la souris, l'icone revient automatiquement à sa position initiale, et donc refait un tour complet dans l'autre sens : je trouve que du coup ca alourdit trop le tout.

Existe-t-il un moyen simple, en css, pour empecher l'animation de revenir à la position première ?

Voici le code :

HTML
<html>
<head>
	<link rel="stylesheet" title="design" type="text/css" href="style.css">
</head>

<body>
<div class="header">
	<div class="nav">
		<a href=""><img src="home.png">Accueil</a>
		<a href=""><img src="cv.png">C.V</a>
		<a href=""><img src="work.png">Réalisation</a>
		<a href=""><img src="email.png">Contact</a>
	</div>
</div>
</body>


et le CSS :
.nav a:hover  img{
	-moz-transform : rotate(360deg);
}

.nav a {
    padding: 20px 10px 10px 10px ;
}

.nav a img {
	-moz-transition: all 1.1s ease 0s;
}


Merci par avance pour votre temps Smiley smile

Plo.
Hello.

Essaie peux-être de voir du côté des animations en CSS. C'est certainement gérable à coups de keyframe.
Hello,
A priori, ce n'est pas possible. Le hover est en événement déclenché 2 fois. Cependant, tu peux passer par du JS: voila ce que j'ai testé avec jQuery, en utilisant ton code HTML


$('a').mouseenter(function(){
        $(this).find('img').css({WebkitTransform:'rotate(360deg)',WebkitTransition:'all .5s linear'});
    });
    
    $('a').bind('webkitTransitionEnd',function(){
        $(this).find('img').css({WebkitTransform:'rotate(0deg)',WebkitTransition:'none'});
    });


En fait, j'ajoute un event mouseenter sur les liens, et je fais la rotation des images avec une transition CSS. Puis lors de l'event transitionEnd, je remets l'image en rotate 0 mais sans transition...

A+
@vdo93: Pas bête la solution jQuery, mais ça serait peux-être plus propre en ajoutant une classe plutôt qu'en utilisant .css().

Sinon, je viens de tester avec les keyframes et ça m'a l'air de marcher : 
div {
    width: 50px;
    height: 50px;
    background: red;
    border-bottom: 1px solid green;
    
    /*Pour faire propre en cas  de mouseout avant la fin de la rotation*/
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

@-moz-keyframes rotate {
        0%   {
            -moz-transform: rotate(0);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
}

div:hover {
     -moz-animation: rotate 2s ;
}
Hop, un lien vers la chose en action.

Sur un div, le comportement est un peu foireux si on survole juste un de ses coins, mais avec un a:hover img, ça devrait être plutôt smooth.

Edit: Mise à jour
Modifié par Florian_R (20 Oct 2011 - 11:39)
Sujet clos
Aller à