アニメーションを開始すると、CSS枠がテキストを下に移動します

Question

私が作っているウェブサイトでは、画像の周りに黄色と紫色を繰り返して表示するボーダーアニメーションを作成しようとしていました。私はこれで出てきました：

@-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要素でアクティブにしました。しかし、私の上にマウスを置いたとき、境界が現れ、テキストを上下に繰り返し押していました。アニメーション化された要素に境界線を追加しようとしましたが、アニメーション化された境界線は境界線の上にあります。

これを修正する方法はありますか？どんな助けも素晴らしいだろう。

Answer 1

アニメーション化する要素のクラスの基本的な境界線を設定し、境界線の色の変更のみでアニメーションを処理させます。

.animated { 
 
    border: 5px solid transparent; /** the basic border **/ 
 
    border-radius: 25px; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

 
.animated:hover { 
 
    animation: battle 1s infinite alternate; 
 
} 
 

 
@keyframes battle { 
 
    from { 
 
     border-color: yellow; 
 
    } 
 

 
    to { 
 
     border-color: purple; 
 
    } 
 
}

<div class="animated"> 
 
    This is the content 
 
</div>