如何使动画不口吃并永远运行？

Question

我有这个动画应该永远运行。但是观察到的结果是在重复之间可以在那里观察到的一些打击，口吃（铬）。如何在没有这种口吃的情况下平滑它？

@-webkit-keyframes borderBlink {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: black
  }
}

@keyframes borderBlink {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: black
  }
}

.borderBlink {
  border: 1px solid black;
  /* add 'border-color: transparent' if you wish no border to show initially */
}

.borderBlink:hover {
  -webkit-animation: borderBlink 1s infinite;
  animation: borderBlink 1s infinite;
}

<div class='borderBlink'>Border flash on hover</div>

Answer 1

我建议您是否希望更顺畅的悬停转换在 CSS 文件中添加以下内容 - {0: "[object Object]", 1: "[object Object]", 2: "[object Object]"} ，如下所示：

transition-timing-function: ease-in-out;

这将在鼠标悬停和鼠标离开时提供平滑的.borderBlink { border: 1px solid black; transition-timing-function: ease-in-out; /* add 'border-color: transparent' if you wish no border to show initially */ } .borderBlink:hover { -webkit-animation: borderBlink 1s infinite; animation: borderBlink 1s infinite; } 。