如何给带边框的HTML元素添加CSS动画且不让边框也参与动画

你当前实现的动画会作用于整个元素的原因是 opacity 属性会影响元素的所有可见部分，包括边框、内边距区域、内容以及所有子元素，因此直接给带边框的元素添加透明度动画会导致边框一同闪烁。

方案1：拆分结构（推荐，可维护性更高） #

将边框和需要动画的内容拆分到两层元素中，外层承载边框、容器尺寸等静态样式，内层承载文字和动画效果：

调整后的HTML代码

<div class="pageName">
  <span class="pageName-content">Title Page</span>
</div>

调整后的CSS代码

.pageName{
  width: 14.0vh;
  padding: 1.5vh 1.5vh 1.5vh 3.5vh;
  margin: auto;
  /* 边框等静态样式留在外层 */
  border-width: 0.5vh;
  border-style: double;
  border-radius: 1.0vh;
}
.pageName-content {
  font-family: Monaco;
  font-weight: bold;
  font-size: 2.0vh;
  color: #006400;
  /* 动画仅作用于内容层 */
  animation: blinker 5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

方案2：无需修改HTML，使用伪元素承载边框 #

如果不想改动现有HTML结构，可以用CSS伪元素单独实现边框，边框不会受到元素本身透明度动画的影响：

.pageName{
  position: relative;
  width: 14.0vh;
  padding: 1.5vh 1.5vh 1.5vh 3.5vh;
  font-family: Monaco;
  font-weight: bold;
  font-size: 2.0vh;
  color: #006400;
  margin: auto;
  animation: blinker 5s linear infinite;
}
/* 伪元素单独实现边框 */
.pageName::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-width: 0.5vh;
  border-style: double;
  border-radius: 1.0vh;
  /* 避免边框挡住文字的交互事件 */
  pointer-events: none;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

内容的提问来源于stack exchange，提问作者user3597208