動畫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

回答

相關問題