18008 sujets

Questions générales et questions de débutants

Faire une transition "scale-in-ver-center"

Bonjour à tous,

je cherche à faire un changer la couleur d'une "div" quand la souris passe par dessus, mais avec animation qui s'appelle "scale-in-ver-center" ( je vous invite à aller sur site pour comprendre http://animista.net/). Voici le code pour "l'animation" et non la transition:


.scale-in-ver-center {
	-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	-moz-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


Peut-on faire de cette animation une transition?
merci d'avance pour la réponse! vous me sauverez la vie!
Modifié par Pidgy (08 Apr 2017 - 17:25)
Salut,

En fait une animation permet d’animer un élément sans interaction de l’utilisateur, à l’aide de @keyframes.

Dans la propriété animation: scale-in-ver-center 0.5s etc., scale-in-ver-center est en fait le nom d’une animation (@keyframes). Si on regarde cette même animation, on voit :

@-webkit-keyframes scale-in-ver-center {
	0% {
	-webkit-transform:scaleY(0);
	transform:scaleY(0);
	opacity:1
	}
	100% {
	-webkit-transform:scaleY(1);
	transform:scaleY(1);
	opacity:1
	}
}
@keyframes scale-in-ver-center {
	0%{
	-webkit-transform:scaleY(0);
	transform:scaleY(0);
	opacity:1
	}
	100% {
	-webkit-transform:scaleY(1);
	transform:scaleY(1);
	opacity:1
	}
}


Or dans le cas présent il n’y en a pas besoin, on peut juste utiliser la propriété transition avec un :hover.
Modifié par Duchampignon (10 Apr 2017 - 23:02)
Ce qui donne au final :

.scale-in-ver-center {
	transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	transform: scaleY(0);
}
.scale-in-ver-center:hover {
	transform: scaleY(1)
}


Mais je ne vois pas comment tu veux faire dans la pratique car par défaut, ton élément fait 0 de hauteur... donc c’est impossible de passer la souris au dessus
Modifié par Duchampignon (10 Apr 2017 - 22:54)
Je relis ton message et – tu me diras si j’ai juste – tu veux simplement faire changer la couleur de la <div>, pas sa taille ?

Dans ce cas, ça donne :

.scale-in-ver-center {
	transition: background-color 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	background-color: <couleur1>
}
.scale-in-ver-center:hover {
	background-color: <couleur2>
}

Et là c’est tout à fait possible et fonctionnel !

Désolé pour t’avoir embrouillé plus haut Smiley smile

Reste qu’il faut allouer un minimum de taille à la <div> pour pouvoir la survoler
Modifié par Duchampignon (12 Apr 2017 - 19:01)
Sujet clos
Aller à