CSS 边框动画不适用于对象

Question

在一个网站上，我正在创建一个对象，上面有一个边框动画。我在 Stack Overflow 和谷歌上多次搜索这个问题，但没有解决方案。我的动画使边框动起来:

.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>

希望对您有所帮助! :)