CODEWITHSUNDEEP
cssanimation
mikemaccana
mikemaccana

Reputation: 123258

CSS animation prevents subsequently styling the animated properties

In this JSFiddle, there are two blocks, .parent and .child.

However only the background-color actually appears to change. In other words, animating a property with the CSS animation seems to prevent subsequent styling of that property.

How can I change the opacity on the .child block after it has been animated?

edit: Since @srekoble's workaround is the closest thing to an answer I'll mark as it as accepted. If anyone else finds out why the behaviour occurs, though, feel free to add an answer.

Upvotes: 3

Views: 49

Answers (2)

R T
R T

Reputation: 1087

You can always use:

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

You set your color to blue and your opacity to 0.5.

Working fiddle here: http://jsfiddle.net/688zswcv/3/

Upvotes: 0

Vangel Tzo
Vangel Tzo

Reputation: 9313

A solution would be to use a keyframe again for the opacity property like the following:

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

    to {
        opacity: .5;
    }
}

example : http://jsfiddle.net/688zswcv/2/

It's a strange issue however.

Upvotes: 3

Related Questions