Explication de la gestion des bugs animation-duration CSS
Définition bug animation-duration CSS
Vous trouverez ci-dessous divers bugs d'interprétation de la CSS animation-duration.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.
Bug animation-duration CSS n° 1
Bug animation-duration mis par
Système d'exploitation :
Navigateur :
Bug vérifié : oui
Problème avec animation-duration:
Sous Firefox si vous ne spécifier pas d'unité à la valeur de animation-duration, Firefox n'en tient pas compte.div#animationname {
animation-duration: 5;
animation-name: animation;
animation-iteration-count: infinite;
border: 1px solid red;
width: 300px;
}
@keyframes animation{
from {width: 300px}
to {width: 100px; }
}
Exemple :
Solution du problème par DMC :
Pour éviter cela, mettez toujours une unité de durée à la propriété css animation-duration :<style>
div#animationname {
animation-duration: 5s;
animation-name: animation;
animation-iteration-count: infinite;
border: 1px solid red;
width: 300px;
}
@keyframes animation{
from {width: 300px}
to {width: 100px; }
}
</style>
<div id="animationname">Je me réduis</div>
Exemple :