How to make the element instantly return to the initial position after the end of the CSS animation?

advertisements

I am animating an SVG element, using this code:

#bubble_1_{
    -webkit-animation: bubble1 10s  forwards linear infinite;
}

@-webkit-keyframes bubble1{
    0%{
        -webkit-transform: translate(0px,0px);
    }

    5%{
        -webkit-transform: translate(1px,10px);
    }

    10%{
        -webkit-transform: translate(-1px,20px);
    }

    15%{
        -webkit-transform: translate(1px,30px);
    }

    20%{
        -webkit-transform: translate(-1px, 40px);
    }

    25%{
        -webkit-transform: translate(10px,45px);
    }

    30%{
        -webkit-transform: translate(20px,50px);
    }

    35%{
        -webkit-transform: translate(30px,49px);
    }

    40%{
        -webkit-transform: translate(40px, 51px);
    }

    45%{
        -webkit-transform: translate(50px,48px);
    }

    50%{
        -webkit-transform: translate(60px,51px);
    }

    55%{
        -webkit-transform: translate(70px,49px);
    }

    60%{
        -webkit-transform: translate(80px, 51px);
    }

    65%{
        -webkit-transform: translate(90px,48px);
    }

    70%{
        -webkit-transform: translate(100px,51px);
    }

    75%{
        -webkit-transform: translate(110px,49px);
    }

    80%{
        -webkit-transform: translate(120px, 51px);
    }

    85%{
        -webkit-transform: translate(130px,71px);
    }

    90%{
        -webkit-transform: translate(131px,100px);
    }

    95%{
        -webkit-transform: translate(129px,120px);
    }

    100%{
        -webkit-transform: translate(131, 140px);
    }
}

But, when it comes to an end, I can see it going back to it's initial position. That is strange, because transition between 100% and 0% should occur instantly, right? I need that kind of behavior, I don't want it to be seen going back.

Does anyone know what I should do? I tried with 'forwards' and 'backwards', it doesn't work.


It looks like you are just missing px on your 131, 140px setting at 100% keyframe, that should then make it instantly jump back to its starting position once finished (which I think is what you want).

If you need it to stop after one play then you need to add -webkit-animation-iteration-count: 1; and remove the infinte off your animation.