如何在css中播放动画后更改按钮颜色

我试图在播放动画一段时间后更改按钮的颜色。我搜索并发现，它需要改变一个新的框架。这里是我的CSS：如何在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次

来源

2017-09-06 user565

你需要让两个动画之一：

在同一个关键帧

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

叫他们每个人

来源

2017-09-06 10:58:43

希望后更改按钮的颜色，这是你在找什么：

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

来源

2017-09-06 10:46:58

对不起，这并不改变完成动画后的颜色。 – user565

您可以在按钮标记中添加一个范围，并通过延迟几秒钟将颜色更改应用于范围，以完成nim通货膨胀

来源

2017-09-06 10:47:06 Mahmoud

这是一个额外的工作要做到这一点。我已经看到有一个地方有可能在CSS做到这一点.. – user565

我认为不可能在同一个项目上应用两个动画。如果可能的话，我们会根据你的问题学习一个新的技巧;） – Mahmoud

刚刚给了它一个codepen，我无法将两个动画应用到相同的元素。所以我同意这个答案。只需将其包装在另一个元素中，并在一段延迟后触发您的动画。 –

如何在css中播放动画后更改按钮颜色

回答

相关问题