CSSボーダーアニメーションがオブジェクト上で動作しない

Question

ウェブサイトでは、ボーダーアニメーションを持つオブジェクトを作成していました。私はスタックオーバーフローとGoogleでこの問題を何度も探していましたが、解決策はありませんでした。私のアニメーションは国境をアニメーション化しました：

.object-color { 
    -webkit-animation: color 1.5s linear infinite alternate both; 
     animation: color 1.5s linear infinite alternate both; 
} 

@-webkit-keyframes color{ 
    14.3% { 
    color: red; 
    background-color: #e0ffff !important; 
    padding-right: 5px !important; 
    border: 1px solid green !important; 
    } 
    28.6% { 
    color: green; 
    background-color: #e0ffff !important; 
    padding-right: 5px !important; 
    border: 1px solid red !important; 
    } 
    100% { 
    color: green; 
    background-color: #e0ffff !important; 
    padding-right: 5px !important; 
    border: 1px solid red !important; 
    } 
} 

ただし、適用時に境界線がアニメーション化されず、色もありませんでした。どんな助けも素晴らしいでしょう、ありがとう！

Answer 1

キーフレーム内に!importantを使用すると問題が発生します。単に仕事にあなたのアニメーションが発生します!important宣言を削除する：これは役立ちます

.object-color { 
 
    -webkit-animation: color 1.5s linear infinite alternate both; 
 
    animation: color 1.5s linear infinite alternate both; 
 
} 
 

 
@-webkit-keyframes color { 
 
    14.3% { 
 
    color: red; 
 
    background-color: #e0ffff; 
 
    padding-right: 5px; 
 
    border: 1px solid green; 
 
    } 
 
    28.6% { 
 
    color: green; 
 
    background-color: #e0ffff; 
 
    padding-right: 5px; 
 
    border: 1px solid red; 
 
    } 
 
    100% { 
 
    color: green; 
 
    background-color: #e0ffff; 
 
    padding-right: 5px; 
 
    border: 1px solid red; 
 
    } 
 
}

<div class="object-color">Hi</div>

希望を！ :)