CODEWITHSUNDEEP
cssanimationkeyframe
Julian
Julian

Reputation: 1017

How to persist css3 animation change

Goal is to keep the background red at the end of the animation.

Using chrome http://codepen.io/JulianNorton/pen/RNqLZM

.animation {
    -webkit-animation:test-animation 2s 2;
    // Animation stops after a few seconds, state doesn't stay red.
}


@-webkit-keyframes test-animation {
    0% {

        background-color:#fff
    }

    100% {
        background-color:red
    }
}

@keyframes test-animation {
    0% {
        background-color:#fff
    }

    100% {
        background-color:red
    }
}

Upvotes: 0

Views: 510

Answers (2)

Philipp Meissner
Philipp Meissner

Reputation: 5482

animation-fill-mode: forwards;

is most likely what you were looking for. Source: CSS Animation property stays after animating

Upvotes: 1

ingridly
ingridly

Reputation: 159

Just set the background color of your .animation element to red. Since the keyframe animation is triggered automatically, it will not appear red at first, but white like you want.

Upvotes: 0

Related Questions