Html 启动动画时，CSS边框会向下移动文本

在我制作的一个网站上，我试图创建一个边框动画，在图像周围反复闪烁黄色和紫色。我说的是：

@-webkit-keyframes battle {
    0% {
    border:5px solid yellow;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    padding: 0px;
    }
    50% {
    border:5px solid purple;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    padding: 0px;
    }
}

我用：hover元素激活了它。然而，当我将鼠标悬停在它上面时，出现了边框，并反复上下推下方的文本。我试图向动画元素添加边框，但动画边框刚好位于边框顶部

---

有办法解决这个问题吗？任何帮助都会很好

在要设置动画的元素类中设置基本边框，然后让动画仅处理边框颜色的更改

.动画{ 边框：5px实心透明；/**基本边框**/ 边界半径：25px； 宽度：100px； 高度：100px； 文本对齐：居中； } .动画：悬停{ 动画：战斗1无限交替； } @关键帧战斗{ 从{ 边框颜色：黄色； } 到{ 边框颜色：紫色； } } 这就是内容

---

首先，什么是战斗？它是一个类还是一个ID？当它不悬停时，您可以添加一个透明边框。这样，大小就不会改变。@clabe45是动画的名称