animer une ligne de gauche à droite

Bonjour,

J’ai une barre de nav qui va de gauche à droite, mais cela prend un temps fou… quelques secondes !!!!

Comment lancer l’animation dès l’ouverture de la page ?

Mes CSS :

#menu
{
	width: 100%;
	left: 0px;
	right: 0px;
	/* [disabled]text-align: right;
	*/
	color: #FFFFFF;
	z-index: 99999;
	margin-top: 10px;
	background-color: transparent;
	position: relative;
}

#menu.fixed
{
	position:fixed;
}

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	animation-name: slidein;
	text-align: right;
	left: -3000px;
	position: fixed;
	list-style-type: none;
}

et le JS :

<script>
$(document).ready(function(){
	$('.nav').hide();
});
$(window).load(function(){
	$('.nav').fadeIn('slow');
	$(".nav").delay(700).animate({
		right:'10px',
		opacity:1
	},1200,'swing');
});
</script>

Merci beaucoup et bonne soirée

Salut,

Pourquoi gérer les animations en JS en plus du CSS ?

Les performances sont forcément moindres en comparaison, en plus de dépendre d’une librairie (jQuery je suppose, vu la syntaxe) qui n’a plus grand intérêt à l’heure actuelle.

Pour info le CSS demande une transition d’uns seconde pour chaque changement de valeur, et le JS change plusieurs fois de valeur… forcément ça crée un effet indésirable.

Merci viki53,

J’ai supprimé le JS, mais je bloque sur les CSS Il doit manque quelque chose

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	animation-name: slidein;
	text-align: right;
	position: fixed;
	list-style-type: none;
}

@keyframes slidein
{
	from
	{
		left:-3000px;
	}

	to
	{
		right: -20px;
	}
}

Merci et bonne soirée

Ok mais qu’est-ce qui ne va pas exactement ? Difficile de deviner ce qui manque sans avoir toutes les informations…

Pardon viki53,

ça concerne une barre de nav qui part de gauche (css left: -3000px ) pour aller et rester à droite (```css right: -20px

Je ne sais pas si le JS est nécessaire, mais je n'y arrive pas sans. Le seul souci, c'est que le départ arrive au bout de quelques secondes  :B 

Merci beaucoup  ;) 

3000 px ça fait beaucoup, tu ne veux pas plutôt le décaler de sa propre largeur uniquement ?

Dans tous les cas, pour les translations, il vaut mieux déplacer le calque (plutôt que de re-calculer la position de l’élément à chaque frame) avec transform: translateX(). Ça évite aussi de jour sur deux propriétés left et right comme tu le fais.

merci viji53,

Ce genre de chose (inéficcace pour le moment

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	animation-name: slidein;
	list-style-type: none;
	transform: translateX(3ch);

}

@keyframes slidein
{
	from
	{
		left:-300px;
	}

	to
	{
		right: -20px;
	}
}

C’est le transform qu’il faut animer, pas la position.

J’ai bien fait quelque chose comme ça :

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	list-style-type: none;
	position: fixed;
animation-name: move;

}
@keyframes move {
    0% {
        transform: translateX(-300px);
    }
    100% {
        transform: translateX(right: -20px); 
    }
}

mais la barre de nav reste à droite et non à right: -20px

Est-ce que j’approche ?

Merci et bonne soirée

La fonction translate attend une longueur ou un pourcentage, tu ne peux pas écrire right: -20px dedans.

right est fait pour indiquer la position de base de l’élément, la translation vient s’appliquer après, pour décaler le calque.

https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/translateX

Bonjour viki53,

Merci pour ton aide. Effectivement, ça avace avec ce code :

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	list-style-type: none;
	position: fixed;
animation-name: move;
	margin-right: -20px;

}
@keyframes move {
    0% {
        transform: translateX(-300px);
    }
    100% {
        transform: translateX(300px); 
    }
}

Le seule souci est que la barre de nav ne reste pas à droite, elle reviens de suite à gauche; et comment pui-je déterminé l’endroit de l’arrêt (right: -20px donc) ?

Merci, je vais voir ton lien (je n’ai pas trop compris l’histoire de calque

Bonne journée

Si tu veux que l’état reste au-delà l’animation, il faut l’indiquer dans le code, en dehors de l’animation donc.

Idéalement tu peux définir la position finale sur .nav, et utiliser l’animation pour surcharger la position de départ, en lui donnant la même position finale pour faire coïncider les deux valeurs.

Bonjour viki53,

Rien ne change Peut-être ai-je mal compris ton dernier com (c’est sûrement ça )

En gros il faut que la fin de l’animation corresponde aux styles de base de l’élément. Sinon une fois l’animation terminée, les styles retourneront à ce qui est défini sur l’élément (sans prendre en compte l’animation, qui est terminée).

.nav
{
	/* Le reste ici */
	transform: none;
}
@keyframes move {
    0% {
        transform: translateX(-300px);
    }
    100% {
        transform: none;
    }
}

Avec :

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	list-style-type: none;
	position: fixed;
	animation-name: move;
	margin-right: -20px;
	transform: none;
}

@keyframes move
{
	0%
	{
		transform: translateX(-300px);
	}

	100%
	{
		transform: none;
	}
}

Rien ne change, la barre de nave reste toujours à gauche

Tu peux partager un exemple interactif qui reproduit ton problème ?

En mettant juste ce CSS et un HTML basique j’ai bien l’animation.

Si tu veux que la barre soit à droite il faut la positionner à droite (mais sans animation).

Si tu veux que la barre soit à droite il faut la positionner à droite (mais sans animation).????

Voici un codepen anim horizontale Merci viki53

Ok, reprenons du début.

Si tu veux animer "l’arrivée" du menu, il faut d’abord le positionner de façon statique. Là tu peux jouer avec right ou left si besoin, par exemple.

Ensuite, et seulement après cette étape, tu peux t’occuper d’ajouter l’animation pour définir sa position de départ (en admettant que la position d’arrivée soit la position statique déjà définie).

Oui, ça, bouge… mais la ligne s’arrête à left:0… ne va pas à right: -20px

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	position: static;
	animation-name: move;
	margin-right: -20px;
	transform: none;
}

@keyframes move
{
	0%
	{
		transform: translateX(-300px);
	}

	100%
	{
		transform: 3000px;
	}
}

Normal, tu n’as pas positionné ton élément, donc par défaut il est à gauche.

Ça paraît tellement facile pour toi, mais bon… tu m’as fait avancer petit à petit et j’ai compris

Merci pour les leçons et tout le reste, un énorme MERCI viki53. Très bonne journée