CSS动画可防止随后为动画属性设置样式

Question

在this JSFiddle中，有两个块，.parent和.child。

• .child动画，使用CSS动画更改其Y位置opacity
• 3秒后，将一个新类应用于身体。这会更改.child s background-color和opacity。

但是只有background-color实际上似乎有所改变。换句话说，使用CSS动画动画属性似乎可以防止该属性的后续样式。

如何在动画后更改.child块上的不透明度？

编辑：由于@ srekoble的解决方法是最接近答案的，我会将其标记为已接受。 如果有其他人发现行为发生的原因，请随时添加答案。

Answer 1

解决方案是再次使用关键帧作为opacity属性，如下所示：

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: .5;
    }
}

示例：http://jsfiddle.net/688zswcv/2/

然而，这是一个奇怪的问题。

Answer 2

您可以随时使用：

.newstate .child{
    background-color: rgba(0,0,255,0.5);
}

您将颜色设置为蓝色，将不透明度设置为0.5。

在这里工作小提琴：http://jsfiddle.net/688zswcv/3/