动画div颜色

我一直在密切关注这段代码，试图了解如何动画边框。通过调整代码，我可以对边框颜色进行动画处理。动画div颜色

但是，我没能实现动画使用@keyframes结构相同

可能有人请帮助一个div的背景色的效果（不是想为替代的解决方案，而只是想用@关键帧）

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

来源

2016-05-25 serious_coder

我猜你从价值@keyframes -example https://css-tricks.com/snippets/错过css/keyframe-animation-syntax/ – theinarasu

自编辑以来，它的工作原理是:)，那现在有什么问题？ :) –

您需要将两个动画结合：

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一塌糊涂，我做了快:)

来源

2016-05-25 00:26:06 Tico

好的谢谢。现在你将如何编辑这段代码，以便它仅激活边界？ –

只是删除背景颜色动画（ '动画：animateBorder 1s无限;'）或使用关键帧使用相同的'background-color'（有点hacky） – Tico

或如果我删除animategreen 1s无限从.green？ –

，你只能有一个动画的每个，在这里你设置的背景为绿色，那么你有边框覆盖它，无论是动画应该是混合

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

来源

2016-05-25 00:25:48

回答

相关问题