How to persist css3 animation change

Question

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

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

animation-fill-mode: forwards;

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

edited May 23 '17 at 12:12

Community

1
1

answered Mar 16 '15 at 21:32

Philipp Meissner

5,273
5
34
59

http://codepen.io/JulianNorton/pen/EaOwpW Thank you for this, at first I thought this wasn't the answer, but I had forgotten to add -webkit. – Julian Mar 16 '15 at 21:48
You are welcome. It's always the details that fix it ;) – Philipp Meissner Mar 16 '15 at 22:24

score 0 · Answer 2 · answered Mar 16 '15 at 21:32

0

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.

answered Mar 16 '15 at 21:32

ingridly

159
10

How to persist css3 animation change

2 Answers2