如何在css中播放動畫後更改按鈕顏色

Question

我試圖在播放動畫一段時間後更改按鈕的顏色。我搜索並發現，它需要改變一個新的框架。這裏是我的CSS：

.header-button { 
 
    font-size: 12px; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); 
 
    color: #fbd3cc; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
    height: 30px; 
 
    border: 1px solid rgba(255, 255, 255, .4); 
 
    border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    display: inline; 
 
    background: #026890; 
 
} 
 

 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.animate-flicker { 
 
    animation: fadeIn 0.5s infinite alternate; 
 
    animation-iteration-count: 10; 
 
    -moz-animation-name: changecolor; 
 
} 
 

 
@keyframes changecolor { 
 
    { 
 
    color: red; 
 
    } 
 
}

<button class="header-button animate-flicker">Menue 
 
</button>

有沒有人告訴我，我怎麼能在CSS播放動畫5次

Answer 1

你需要讓兩個動畫之一：

• 在同一個關鍵幀

@keyframes fadeInNColor { 
    from { 
    opacity: 0; 
    } 
    to { 
    color: red; 
    } 
} 

• 或相同的規則

animation: fadeIn 0.5s infinite alternate, changecolor 0.5s infinite alternate forwards; 

.header-button { 
 
    font-size: 12px; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .8); 
 
    color: #fbd3cc; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
    height: 30px; 
 
    border: 1px solid rgba(255, 255, 255, .4); 
 
    border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    display: inline-block; 
 
    background: #026890; 
 
} 
 

 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.animate-flicker { 
 
    animation: 
 
    fadeIn 0.5s infinite alternate, /* first animation*/ 
 
    changecolor 0.5s infinite alternate forwards;/* second animation freezed */ 
 
    animation-iteration-count: 5; 
 
} 
 

 
@keyframes changecolor { 
 
    to { 
 
    color: red; 
 
    } 
 
}

<button class="header-button animate-flicker">Menue 
 
</button>

叫他們每個人

Answer 2

希望後更改按鈕的顏色，這是你在找什麼：

@keyframes changecolor 
{ 
to {background:red;} 
} 

Answer 3

您可以在按鈕標記中添加一個範圍，並通過延遲幾秒鐘將顏色更改應用於範圍，以完成nim通貨膨脹