Question

我一直在密切关注此代码，试图了解如何设置边框动画。通过调整代码，我能够为边框颜色设置动画。

但是，我无法使用@keyframes的相同结构实现动画div背景颜色的效果

有人可以请求帮助（我没有尝试替代解决方案，但只想使用@keyframes）

HTML＆amp; CSS：

.wrapper {
  border: 1px solid;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}
.green {
  height: 200px;
  width: 200px;
  animation: 1s animategreen ease infinite;
  margin-right: auto;
  margin-left: auto;
}
@keyframes animategreen {
  to {
    background-color: rgba(0, 255, 0, 1);
  }
}

<div class="wrapper">
  <div class="green">
  </div>
</div>

Answer 1

每个只能有一个动画，在这里你将背景设置为绿色，然后用边框覆盖它，两个动画都应混合

.wrapper {
  border: 1px solid;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}
.green {
  height: 200px;
  width: 200px;
  animation: 1s animategreen ease infinite;
  margin-right: auto;
  margin-left: auto;
  animation: 1s animateBorder ease-in infinite;
  border: 3px solid rgba(255, 0, 0, 1);
}
@keyframes animateBorder {
  to {
    border-top-color: rgba(0, 0, 102, 1);
    border-right-color: rgba(0, 0, 102, 1);
    border-bottom-color: rgba(0, 0, 102, 1);
    border-left-color: rgba(0, 0, 102, 1);
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-top-color: rgba(51, 0, 204, 1);
    border-right-color: rgba(51, 0, 204, 1);
    border-bottom-color: rgba(51, 0, 204, 1);
    border-left-color: rgba(51, 0, 204, 1); 
    background-color: rgba(0, 255, 0, 1);
  }

<div class="wrapper">
  <div class="green border">
  </div>
</div>

Answer 2

您需要合并两个动画：

animation: animation1 1s infinite, animation2 1s infinite，例如

以下是您的代码兼容：

.wrapper {
border: 1px solid;
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;

}

.green {
height: 200px;
width: 200px;

animation: animategreen 1s infinite, animateBorder 1s infinite;

margin-right: auto;
margin-left: auto;
}

@keyframes animategreen {
  
    0%     {background-color:red;}
    100%  {background-color:green;}
}

.border {

border: 3px solid rgba(255,0,0,1);
}

@keyframes animateBorder {
to {

border-top-color: rgba(0,0,102,1);
border-right-color: rgba(0,0,102,1);
border-bottom-color: rgba(0,0,102,1);
border-left-color: rgba(0,0,102,1);
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-color: rgba(51,0,204,1);
border-right-color: rgba(51,0,204,1);
border-bottom-color: rgba(51,0,204,1);
border-left-color: rgba(51,0,204,1);    

}

<div class="wrapper">
<div class="green border">
</div>
</div>

很抱歉CSS乱七八糟，我速度很快：）

动画div颜色

2 个答案: