CSS 闪烁的帧

Question

我需要 1 像素厚的帧出现和消失，但在我的代码中它看起来像第二帧出现而不是第一帧消失（或者第一帧变得更厚和更暗），然后才使这两个帧都消失。

#bord1 {
  -webkit-animation: bord 2s linear infinite;
  animation: bord 2s linear infinite;
  display: inline-block;
}

@-webkit-keyframes bord {
  50% {
    border: 1px solid red
  }
}

@keyframes bord {
  50% {
    border: 1px solid red
  }
}

<div id="bord1">10 000 000</div>

Answer 1

只需设置初始透明边框

#bord1 {
  animation: bord 2s linear infinite;
  display: inline-block;
  border: 1px solid transparent; /* added */
}

@keyframes bord {
  50% {
    border: 1px solid red;
  }
}

<div id="bord1">10 000 000</div>

CSS 闪烁的帧

CSS flickering frame

css

css-animations