Firefox에서 테두리에 애니메이션을 사용하는 데 문제가 있습니다. (이상)

Question

현재 경계에서 애니메이션을 사용하고 있습니다 (Firefox에서는 없음에서 50 픽셀까지). 크롬은 아주 좋아 보이지만 파이어 폭스는 그렇지 않다. 오페라에도 똑같은 문제가 있다고 생각한다.

여기 당신에게 문제를 보여주는 작은 바이올린이야 (크롬, 다음 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; 
} 

내가 문제가 국경에서 온 있다고 가정 : 없음;

해결 : 값은,하지만 난

이

가 편집이 ... 이것을 달성하는 방법을 알고하지 않습니다!

문제는 파이어 폭스 인, 국경의 초기 정의를 필요로한다는 것이다 적어도 :

border: 0 solid; 

fiddle

Answer 1

Firefox에서 국경을 애니메이션 일부 문제가있는 것 같다,하지만이 해결 될 수 같은 : 또한

@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; 
} 

는 DIF와 애니메이션을 포함하는 것을 잊지 마세요 이전 브라우저를 지원할 수있는 접두어 :

@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; 
...