28202 sujets

CSS et mise en forme, CSS3

[Résolu] 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 Smiley murf

Merci beaucoup à vous Smiley cligne
salut
pour qu'une anim ne se fasse qu'une fois sans retour:
animation: forwards;

et pour un déplacement horizontal:
transform: translateX(px);
Modifié par drphilgood (01 Apr 2025 - 16:21)
Super, merci beaucoup drphilgood.
par contre maintenant, il n'y a plus aucune animation. Où ai-je fauté ?
Merci encore.

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

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

  to {
    transform: translateX(100%);
  }
}
Modérateur
Salut,

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

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

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

Ç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 Smiley murf

Je vais y arriver, merci et bonne journée Smiley cligne
Administrateur
Hello
PLGPPUR a écrit :
Quelque chose que j'ai (encore) mal compris contrairement à jeffreestar Smiley murf

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 Smiley cligne
Encore merci à vous et bonne soirée.
Administrateur
J'ai oublié la durée Smiley mur
C'est évidemment nécessaire.

animation: slide-in 2s forwards;


Résultat : https://codepen.io/raphaelgoetter/pen/jEOvwxx?editors=1100

EDIT : dans mon codepen, l'animation n'est déclenchée que si les paramètres utilisateurs le permettent (@media prefers-reduced-motion). Je te conseille fortement de faire de même. 

/* Animation si autorisée */
@media not (prefers-reduced-motion: reduce) {
  .navigation {
    animation: slide-in 2s forwards;
  }
}

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

Modifié par Raphael (02 Apr 2025 - 18:40)
Salut Raphaël,
c'est mieux avec une durée Smiley biggrin mais avec ces keyframes (merci pour ton codepen), la nav reste à gauche. Comment faire pour quelle parte de left : -100% à right: 20px ?
Désolé Smiley sweatdrop
Bonne fin de journée Smiley cligne
Administrateur
Alors ce que tu demandes est un peu plus tricky, en tout cas avec `translate` dont les valeurs se réfèrent à la propre taille de l'élément et non de la fenêtre.

Pour faire ce que tu souhaites, il va falloir sortir ta navigation du flux (position absolute ou fixed), puis la déplacer avec `left` et/ou `right`.

Le souci principal étant qu'on voudrait passer de `left: -100%` à... `right: 0` or on ne peut pas transiter d'une propriété vers une autre.

J'ai modifié mon Codepen précédent en appliquant une astuce qui fait le job, mais il y a peut-être une meilleure technique (?)


@keyframes slide-in {
  from {
    left: -100%;
  }
  to { 
    left: calc(100% - 20px);
    translate: -100%;}
}
Meilleure solution
T'es génial Raphaël (et tu n'es pas le seul sur les forums Alsa Smiley smile
Bon, je vais tenter de comprendre les valeurs et de près Smiley cligne
C'est NICKEL !!!!!
Merci beaucoup Smiley lol
Modérateur
Bonsoir,
avec:
/* Animation si autorisée */
@media not (prefers-reduced-motion: reduce) {
  .navigation {
    position: sticky;
    display: flex;
    animation: slide-in 2s forwards;
    will-change: right, translate;
    right: 100vw;
    translate: -200%;
    margin-left: auto;
  }
}

@keyframes slide-in {
  to {
    right: 0;
    translate: -20px;
  }
}


le positionement sticky et relative pourrait être aussi impliqués (en gardant fixed et absolute fonctionnel) pour rester ou pas dans le fux.

https://codepen.io/gc-nomade/pen/KwKJbeZ , juste pour ajouter une approche.

Cdt
Modifié par gcyrillus (03 Apr 2025 - 20:57)
Prévenir un modérateur
Répondre au sujet
Aller à