Glisser une image de gauche à droite

Résolu
chamoismignon Messages postés 40 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 21 avril 2025 - 22 janv. 2025 à 19:27
chamoismignon Messages postés 40 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 21 avril 2025 - 24 janv. 2025 à 01:20

Bonsoir,

Je souhaiterais animer une image avec le code ci-dessous, mais celui-ci montre une erreur CSS sur mon fichier.

	/* définition de l'animation utilisée ci dessus, on change la position du background de 0 à 100px. Cela correspond à la largeur de l'image utilisée dans cet exemple */
	@keyframes musetteAnimation
	{
		from
		{
			background-position-x: 2048px;
		}

		to
		{
			background-position-x: 0px;
		}
	}

Existe-t-il une alternative ?

Merci beaucoup et bonne soirée ;)

2 réponses

mamiemando Messages postés 33636 Date d'inscription jeudi 12 mai 2005 Statut Modérateur Dernière intervention 18 avril 2025 7 842
23 janv. 2025 à 17:11

Bonjour

As-tu essayé de faire marcher (et si oui, de repartir) de cet exemple ?

<html>
<head>
<style>
p {
  animation-duration: 25s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</style>
</head>
<body>
<p>
  Le Chat grimaça en apercevant Alice. Elle trouva qu’il avait l’air bon enfant,
  et cependant il avait de très longues griffes et une grande rangée de dents ;
  aussi comprit-elle qu’il fallait le traiter avec respect.
</p>
</body>
</html>

Bonne chance

1
chamoismignon Messages postés 40 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 21 avril 2025 1
24 janv. 2025 à 01:20

Merci mamiemando :) Top !!!

Merci Merci beaucoup beaucoup ! 

1