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: 50px; couleur-de-fond: rouge; font-weight: bold; position: relative; animation-name: myAnimation; animation-duration: 5s; animation-fill-mode: forwards; } #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} @keyframes myAnimation { de {gauche: 0px;} à {gauche: 300px;} } </style> </head> <body> <h1>Propriété CSS animation-timing-function</h1> <p>La propriété animation-timing-function spécifie la courbe de vitesse de l'animation. L'exemple suivant montre quelques-unes des différentes courbes de vitesse qui peuvent être utilisées :</p> <div id="div1">linéaire</div> <div id="div2">facilité</div> <div id="div3">ease-in</div> <div id="div4">ease-out</div> <div id="div5">ease-in-out</div> </body> </html>