Animation d'un backround-image

Bonjour,

Puis-je animer de droite à gauche et inverse un background-image ?

En mode "cover", cela me semble impossible

Ai-je tort ?

Merci pour vos réponses, bonne journée

Mes CSS :

#musette {
position: relative;
overflow : hidden;
top: 0;
left: 2em;
bottom: 0;
right: 0;
width:100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: top right;
background-repeat: no-repeat;
background-image: url("../images/musette.jpg");
background-color: black;
animation-direction: alternate-reverse;
			}	

Que veux-tu dire par "animer de droite à gauche et inverse" ? Des allers-retours ?

Si oui, alors tu peux ajouter des keyframes ainsi :

  #musette {
    /* ... */
    background-position: 0 0;
    animation: animateLeftToRight 0.2s linear infinite alternate;
   }

  @keyframes animateLeftToRight {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 0;
    }
  }

En revanche tu dois en effet supprimer la ligne background-size: cover pour que cela fonctionne correctement.

Salut, une des solutions pour réaliser ce que tu souhaites est de faire changer la propriété background-position dans une animation CSS.

Voici un exemple de code réalisant ceci : https://jsfiddle.net/pytb9rdf/2/

<div class="musette"></div>

.musette{
  /* On stylise notre élément pour qu'il prenne toute la largeur et 100px de haut. On lui affecte une image de fond que l'on répète de gauche à droite */
  width: 100%;
  height: 100px;
  background-image: url('https://via.placeholder.com/100');
  background-repeat: repeat-x;
  background-position-x: 0px;
  
  /* On définit les comportements de l'animation : sa durée (3 secondes), le nombre d’exécution (à l'infini), la fonction de "mouvement" (début et fin "amortis"), le sens du mouvement (en alternance), le nom de l'animation qui va être définit ci dessous */
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-name: musetteAnimation;
}

/* 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: 0px;
  }

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

Explication de

GE-NIAL !!!

Il est super ce forum et les gens y sont très sympas !!!

Merci pour tout seeoX, tes explications y sont aussi très importantes !!!!

ça me met de super humeur

Encore MERCI !

Merci aussi Big-Blob, je n’avais pas vu ta réponse

Comme dit plus haut, les personnes de ce forum sont vraiment très sympas !

Merci à vous

Ah… ça m’a rappelé un autre post (sauf que c’était du texte et non de l’image)

Bonsoir Gil Cot,

Tu penses que j’aurais pu y arriver avec le post sur le texte défilant ?

Je parlais d’animation background, j’ai d’ailleurs un problème de taille depuis qu’il n’y a plus de mode "cover".il me semble que l’image apparaît actuellement à 100%, donc 2 fois plus grande (j’ai doublé la taille pour les écrans retina). Une idée ?

Par contre, il est vrai que je pars souvent perdant… le peur de ne pas y arriver…

J’espère que vous êtes aussi costauds en js, parce que j’ai un problème de taille (dans le sens : gros problème

Bonne soirée/nuit

P.

Arf, non, j’ai lu trop vite : j’ai cru qu’il s’agissait juste d’une image à la place du texte… Mais c’est un peu différent ici vu que c’est en background et non en foreground.

Bonjour à tous,

J’ai une erreur "Expected BRACE" au niveau de ce code :

@keyframes musetteAnimation {
  from {-3000%;
	}

  to {
    background-position-x:-1000%;
  }
}

Toutes le accolades sont portant là

Me trompe-je ?

Merci et bon dimanche

C’est le from {-3000%;} qui est déroutant ; on s’attend à des nom-de-propriété: valeur; entre accolades. Juste -3000% on sait pas ce que ça doit signifier…

Bonsoir Gil Cot

J’ai le même souci avec le code original :

/* 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: 0px;
  }

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

:/

Bonne soirée

Rien à signaler à première vue. L’erreur doit être ailleurs… Il faut reprendre le fichier dès le début en jouant avec le pliage si ton éditeur a cette fonctionnalité. Il se peut que ce soit un commentaire mal placé ou une suppression accidentelle de ligne.

Bonjour Gil Cot,

Merci pour ta réponse

le "pliage" ? C’est à dire ?

J’ai tout vérifié, bien respecté le code; mais toujours une erreur (???) sur cette ligne :

@keyframes musetteAnimation {

Une idée ? Bonne journée,

P.

Si tout est vérifié et qu’il n’y a pas d’oubli pour sûr, alors c’est ton programme d’analyse qui ne connait pas encore @keyframes et similaires. Si ça se trouve il croit même que c’est une directive @… ()

Pour le pliage de code, comme je disais ça dépend vraiment de ton éditeur. Je suggérais cela comme raccourci mais ce n’est absolument pas grave si ce n’est pas disponible.

Si si, il connaît bien les @keyframes. Enfin… je vais vérifier mais normalement cet éditeur accepte tout :/

Bonne soirée Gil Cot

J’oubliais : https://jigsaw.w3.org/css-validator/

Bonjour Gil Cot,

Merci, je fais ça ASAP

Bon après-midi

P.

Bonjour Gil Cot,

Voici l’erreur :

Erreur lors de l’analyse grammaticale. {-3000%;

Je ne comprends pas, et idem avec le code initial

Une idée ?

Merci et bonne journée

P.

Ça avait été déjà pointé : {-3000%;} n’a pas de sens…

Le code corrigé que tu as posté et celui proposé par SeeoX passent tous les deux la validation de W3C…

Bonjour Gil Cot

Mon éditeur détecte une erreur, mais no souci avec la validation W3C

SUPER ! Bonne journée,

P