Développer une animation en CSS3 Un simple déplacement en CSS3

1. L'objectif

Nous voulons déplacer, sans fin, une boîte <div> de gauche à droite, puis de droite à gauche.

2. La structure

Créez une boîte <div> identifiée #boite.

<div id="boite"><p>&nbsp;</p></div>

Avec une mise en forme très simple :

#boite {
  background-color: red;
  position: relative;
  width: 100px;
  height: 100px;
}

3. L'animation

La boîte rouge doit aller à une position fixée à la moitié de la durée totale, puis revenir à sa position initiale à la fin de l'animation. Nous aurons donc trois keyframes : à 0 %, 50 % et 100 %. À chaque étape nous indiquerons la position à atteindre avec la propriété left. L'animation est nommée redBox.

@-webkit-keyframes redBox {
  0% {
    left: 10px;
  }
  50% {
    left: 400px;
  }
  100% {
    left: 10px;
  }
}
@-moz-keyframes redBox {
  0% {
    left: 10px;
  }
  50% {
    left: 400px;
  }
  100% {
    left: 10px;
  }
}
@keyframes 'redBox' {
  0% {
    left: 10px;
  }
  50% {
    left: 400px;
  }
  100% {
    left: 10px;
  }
}

Dans les propriétés CSS de la boîte <div>, nous indiquons les propriétés nécessaires :

le nom de l'animation, animation-name.

 la durée de l'animation, animation-duration.

les itérations de l'animation, animation-name.

#boite {
  background-color: red;
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-animation-name: redBox;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: redBox;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  animation-name: redBox;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

Ou en utilisant la syntaxe courte :

#boite {
  background-color: red;
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-animation: redBox 5s infinite;
  -moz-animation: redBox 5s infinite;
  animation: redBox 5s infinite;
}

4. L'affichage

Voilà le résultat à l'écran.