Explication de la gestion des bugs animation-delay CSS
Définition bug animation-delay CSS
Vous trouverez ci-dessous divers bugs d'interprétation de la CSS animation-delay.
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-delay CSS n° 1
Bug animation-delay mis par sdfs
Système d'exploitation : windows 7
Navigateur : Firefox 19.0
Bug vérifié : oui
Problème avec animation-delay:
Sous Firefox si vous ne spécifier pas d'unité à la valeur de animation-delay, Firefox n'en tient pas compte.div#animationname {
animation-duration: 5s;
animation-delay: 3;
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-delay :<style>
div#animationname {
animation-duration: 5s;
animation-delay: 3s;
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 :