在一个网站上,我正在创建一个对象,上面有一个边框动画。我在 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;
}
}
但是,当应用它时,边框没有动画并且没有颜色。任何帮助都会很棒,谢谢!
最佳答案
问题在于您在关键帧内使用了 !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>
希望对您有所帮助! :)
关于CSS 边框动画不适用于对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45788335/