Animation slidein

Bonjour,
j'ai une animation keyframes sur une barre de nav.
L'animation (de gauche à droite) se passe bien mais la div revient tout de suite après à gauche. Voici mes CSS :

.nav
{
	padding: 10px 10px 0 0;
	animation-duration: 3s;
	animation-name: slidein;
	list-style-type: none;
}

@keyframes slidein {
  from {
    margin-left: 0%;
  }

  to {
    margin-left:50%;
  }
}


.nav ul, .nav li
{
	margin: 0;
	padding: 0;
}

.nav li
{
	display: inline;
	position: relative;
	list-style: none;
}

.nav li a
{
	display: inline-block;
	color: white;
	font-family: 'helvetica_now_text_black','Raleway', sans-serif;
	font-size: 24px;
	transition: all 0.3s;
	transform: scale(0.8);
	opacity: 1;
	-webkit-text-stroke: 0.8px black;
	white-space: nowrap;
	min-width: 3em;
	text-align:center;
}

.nav li a:hover
{
	color: white;
	transform: scale(1.2);
	opacity: 0.5;
}

.nav li ul
{
	display: none;
	/* Rend le menu déroulant caché par défaut */
}

.nav li:hover ul
{
	/* Affiche le ul contenant le sous-menu au survol de la souris */
	/* Il ne faut pas d'espace entre le li qui déclenche l'affichage du sous-menu et ce ul */
	/* Sinon, quand on déplacera la souris du li vers le sous-menu, on perdra le hover */
	z-index: 99999;
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
}

et le HTML :

<nav>
	<ul class="mynavbar">
		<li><a href="#jaune">UN</a></li>
		<li>
			<a href="#">DEUX</a>
			<ul>
				<li><a href="#green">liena</a></li>
				<li><a href="#red">lienb/a></li>
			</ul>
		</li>TROIS</a></li>
		<li><a href="Contact/formpage.html" target="_blank">CONTACT</a></li>
	</ul>
</nav>

J'en profite pour poser une seconde question, est-il possible de faire une animation du genre : left: -100px to right: 10px pour que la nav se cale à 10 px du côté gauche ? J'ai tenté mais... rien

Merci beaucoup à vous

Salut,

<nav> est différent de <nav class="nav">

au passage, c'est quoi ce code html ?
Modifié par niuxe (01 Apr 2025 - 18:56)

Bonjour niuxe,

Tu as entièrement raison, et pour tout... pardon

Ça ne fonctionne toujours pas avec ces CSS :

nav
{
	animation-name: slidein;
	list-style-type: none;
	animation: forwards;
}

@keyframes slide-in
{
	from
	{
		transform: translateX(0%);
	}

	to
	{
		transform: translateX(100%);
	}
}

Quelque chose que j'ai (encore) mal compris contrairement à jeffreestar

Je vais y arriver, merci et bonne journée

Hello

PLGPPUR a écrit :
Quelque chose que j'ai (encore) mal compris contrairement à jeffreestar

Ton @keyframes donne le nom de "slide-in" à ton animation... Mais ta propriété animation fait référence à "slidein".

EDIT : il y a un second problème. Ta propriété "animation" (propriété raccourcie) écrase la propriété "animation-name" que tu as écrite avant.

Le plus simple serait d'appliquer toutes les valeurs dans la propriété raccourcie uniquement :

animation: slide-in forwards

Au final :

nav
{
  animation: slide-in forwards;
  list-style: none;
}

@keyframes slide-in {
  from { translate: 0; }
  to { translate: 100%; }
}

Modifié par Raphael (02 Apr 2025 - 10:14)

reBonjour,
Merci Raphaël.
Cela ne fonctionne pas à cause de mon code (bouillabaisse ascendant bougli bouga).
Je tente d'y voir plus clair et reviens vers vous ASAP. Y'a pas de raison que ça marche pas
Encore merci à vous et bonne soirée.