Clever Geek Handbook

CSS animation prevents subsequent styling of animated properties

There are two blocks in this JSFiddle : .parent

and .child

.

  • .child

    animates using a CSS animation to change its Y position and opacity

  • After 3 seconds, a new class is applied to the body. This changes .child

    background-color

    and opacity

    .

However, in reality only appears background-color

. In other words, animating a property with CSS animation seems to prevent subsequent styling of that property.

How do I change the opacity in a block .child

after animation?

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

+3


source to share


2 answers


The solution would be to use a keyframe again for the opacity property, for example:

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

    to {
        opacity: .5;
    }
}


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

This is a strange problem.

+3


source


You can always use:

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


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

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

0


source






More articles:


All Articles