Bonjour

j'ai un div et lorsque le visiteur pointe dessus je veux qu'il se déplace à droite pendant une seconde mais après 1 seconde il saute à sa place original

je veux qu'il reste là bas jusqu’a ce que le visiteur enlève la souris et quand il revient il revient en douceur 

J'espère que vous m'avez compris!

CSS:

@-webkit-keyframes menu {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(80px);
	}
}
@keyframes menu {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(100px);
	}
}
#menu{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -130px;
	width: 150px;
	height: auto;
	background: #000;
}
#menu:hover{
	animation: menu 2s;
}

Merci d'avance

Une fois que l'animation ce termine, ton div #menu va reprendre sa position initiale, pour remédier à cela tu à deux possibilités;

        - Ajouter translateX(100px) dans ta pseudo-class :hover de ton div #menu

        - ( La meilleure solution pour moi en tout cas ^ ^ ), n'utilise pas de keyframe mais mets dans ta pseudo-class ''translateX(100px)" et dans le style de ton div tu définis :         'transition: transform 1s', avec ça l'animation se fera dans les deux sens et fonctionnera comme tu le souhaites ;) 

Bonsoir

Je n'ai pas compris la définition exacte de pseudo-class

Pouvez vous m'expliquer

bah :hover est une pseudo-class ^ ^

Je parle donc de #menu:hover

Mozilla Doc

"

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur.

Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec :visited ; le statut du contenu avec :checked ; la position de la souris :hover). "

-
Edité par Gaspard98 20 août 2017 à 20:17:15

Ah oui j'ai oublié

Alors voilà mon code css d'après la première solution :

mais ça ne marche pas (le menu ne sort pas de ça cachette)

@-webkit-keyframes menu {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(100px);
	}
}
@keyframes menu {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(130px);
	}
}
#menu{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -130px;
	width: 140px;
	height: auto;
	background-image: url('../img/header_background.png');
}
#menu:hover{
	animation: transform: translateX(130px) 1s ease;
}

et je laisse le keyframes?

merci d'avance

Non non

#menu{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -130px;
    width: 140px;
    height: auto;
    background-image: url('../img/header_background.png');
    transition: transform 1s;
}
#menu:hover{
   transform: translateX(130px);
}

Essaye juste avec ça

Ah merci pour vous

Dieu vous garde!