Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> div { largeur: 100px; hauteur: 100px; couleur-de-fond: rouge; position: relative; animation-name: myAnimation; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; } @keyframes myAnimation { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:jaune; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:vert; left:0px; top:200px;} 100% {background-color:rouge; left:0px; top:0px;} } </style> </head> <body> <h1>Propriété animation-direction CSS</h1> <p>La propriété animation-direction spécifie si une animation doit être jouée en avant, en arrière ou en cycles alternés. L'exemple suivant utilise la valeur "alternate" pour faire fonctionner l'animation en avant d'abord, puis en arrière :</p> <div></div> </body> </html>