Problème lors de l'utilisation de l'animation sur la bordure de Firefox (au moins)

Question

J'ai actuellement des problèmes pour utiliser l'animation sur une bordure, de none à 50px, dans Firefox. Chrome est très bien, mais Firefox ne l'est pas, et je suppose que le même problème sera dans Opera.

Voici un petit violon pour vous montrer le problème (essayez Chrome, puis FF): https://jsfiddle.net/Bonlo/kL5g0qdx/

@keyframes fadeBorder { 
    from { border: 0 solid rgba(0,0,0,0);} 
    to { border: 30px solid black;} 
} 
.main-wrapper { 
    width: 400px; 
    height:400px; 
    background-color: white; 
    animation-name: fadeBorder; 
    animation-duration: 1.5s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

Je suppose que le problème vient de la frontière: none; valeur, mais je ne sais pas comment y parvenir ...

Edit:

Résolue!

La chose est que Firefox besoin d'une définition initiale de la frontière, qui est au moins:

border: 0 solid; 

fiddle

Answer 1

Il semble qu'il y ait un certain problème avec animant les frontières dans Firefox, mais il pourrait être résolu comme ceci:

@keyframes fadeBorder { 
    from { border-width: 0; } 
    to { border-width: 30px; } 
} 
.main-wrapper { 
    width: 400px; 
    height:400px; 
    background-color: white; 
    border: 0 solid black; /* <-- added line */ 
    animation-name: fadeBorder; 
    animation-duration: 1.5s; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

en outre, ne pas oublier d'inclure l'animation avec dif de nouveaux préfixes pour supporter les anciens navigateurs:

@keyframes fadeBorder { ... } 
@-webkit-keyframes fadeBorder { ... } 
@-moz-keyframes fadeBorder { ... } 
@-o-keyframes fadeBorder { ... } 
... 
animation-name: fadeBorder; 
-webkit-animation-name: fadeBorder; 
-moz-animation-name: fadeBorder; 
-o-webkit-animation-name: fadeBorder; 
...