Анимация границы изображения исчезла

Я применяю анимацию изображения границы к элементу. В некоторых браузерах это работает хорошо, но в некоторых браузерах, подождите несколько секунд, изображение границы исчезнет. Кто-нибудь может мне помочь?

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

0 ответов

Другие вопросы по тегам