我想让他的border在2s内闪动2种颜色没反映，这要怎么写?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
</head>
<style>
@keyframes borderbg {
0% {border: 1px solid red !important;}
25% {border: 1px solid #c0ccda !important;}
50% {border: 1px solid red !important;}
100% {border: 1px solid #c0ccda !important;}
}
@-moz-keyframes borderbg {
0% {border: 1px solid red !important;}
25% {border: 1px solid #c0ccda !important;}
50% {border: 1px solid red !important;}
100% {border: 1px solid #c0ccda !important;}
}
@-webkit-keyframes borderbg {
0% {border: 1px solid red !important;}
25% {border: 1px solid #c0ccda !important;}
50% {border: 1px solid red !important;}
100% {border: 1px solid #c0ccda !important;}
}
@-o-keyframes borderbg {
0% {border: 1px solid red !important;}
25% {border: 1px solid #c0ccda !important;}
50% {border: 1px solid red !important;}
100% {border: 1px solid #c0ccda !important;}
}
.cl-Input p{
width: 200px;
height: 200px;
border:1px solid #ccc;
animation: borderbg 2s;
-moz-animation: borderbg 2s;
-webkit-animation: borderbg 2s;
-o-animation: borderbg 2s;
margin: 20px;
}
</style>
<body>
<p class="cl-Input">
<p class="el-input__inner">
</p>
<p class="el-textarea__inner">
</p>
<p class="note-frame">
</p>
</p>
</body>
<script>
</script>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You added it later! important, the color will not change. Went to try it
Just remove !important.
Add so many! What is important? I don’t understand~
!important is generally not recommended~