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.

résultat à l'écran
Résultat à l'écran © Eni

CSS / HTML5