Анимация границы изображения исчезла
Я применяю анимацию изображения границы к элементу. В некоторых браузерах это работает хорошо, но в некоторых браузерах, подождите несколько секунд, изображение границы исчезнет. Кто-нибудь может мне помочь?
@keyframes neon-light-blink {
0%{
-webkit-border-image-source: url("../assets/nl2.png");
-o-border-image-source: url("../assets/nl2.png");
border-image-source: url("../assets/nl2.png");
};
50%{
-webkit-border-image-source: url("../assets/nl3.png");
-o-border-image-source: url("../assets/nl3.png");
border-image-source: url("../assets/nl3.png");
};
100%{
-webkit-border-image-source: url("../asse`enter code here`ts/nl2.png");
-o-border-image-source: url("../assets/nl2.png");
border-image-source: url("../assets/nl2.png") ;
};
}
.neon-light-box {
animation-name: neon-light-blink;
-moz-animation-name: neon-light-blink;
-webkit-animation-name: neon-light-blink;
-o-animation-name: neon-light-blink;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
position: relative;
border-width:$border-width;
border-style: solid;
border-image-slice: 16 16 16 16;
-moz-border-image-slice: 16 16 16 16;
-webkit-border-image-slice: 16 16 16 16;
border-image-repeat: repeat;
-moz-border-image-repeat: repeat;
-webkit-border-image-repeat: repeat;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
}