CSS3 Animate: How to have the object not revert to its initial position after animation has run?

Question

I am attempting a simple transform on a shape in CSS (webkit specifically). The animation runs as expected but upon completion the div will revert to its initial state. Is there any way to have it remain in its final state?

Heres my CSS thus far:

    @-webkit-keyframes rotate-good {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate-bad {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(90deg);
  }
}

#good-arrow 
{
    -webkit-animation-name:             rotate-good; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
}

#bad-arrow 
{
    -webkit-animation-name:             rotate-bad; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;    
    -webkit-animation-delay: 2s;
}

[Working Example](https://stackoverflow.com/a/58032038/6597375) — Deepu Reghunath, Sep 20 '19 at 16:25

score 50 · Answer 1 · edited Nov 22 '22 at 20:54

50

A briefer way to do this is to add:

-webkit-animation-fill-mode: forwards;

which retains the final keyframe state.

Update: full cross browser

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

edited Nov 22 '22 at 20:54

TylerH

20,799
66
75
101

answered Aug 01 '11 at 18:14

Michael Mullany

30,283
6
81
105

This is the best answer for me, but Visual Code suggests that you use `animation-fill-mode: forwards` for chrome compatibility – Julien G Dec 09 '19 at 15:09
2

Why is this not the solution? Not only is it the best, but the official solution does not work if there is an `animation-delay` – Javi Marzán Aug 27 '20 at 10:31

score 20 · Answer 2 · answered Feb 06 '14 at 11:47

the cross-browser solution is:

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

What Madara Uchiha comments above is not always possible for one reason: Imagine instead of starting the animation right away (animation-delay:0s) you want 10 sec of delay before it starts. If so, you would see the final state of your animated element for 10 sec, and then the animation would take it to de 0 keyframe to 100 keyframe transition, but always you are seeing for 10 seconds the ending state.

score 7 · Accepted Answer · answered Aug 01 '11 at 12:33

7

Oh, that's easy, simply set all the css rules to the finishing result. Example

answered Aug 01 '11 at 12:33

Madara's Ghost

172,118
50
264
308

you're right - that was easy! – Sergio Aug 01 '11 at 13:18
@Truth what do you mean under `css rules to the finishing result` ?is it `ease-in-out` property?can't get it working.That is my sample:http://jsfiddle.net/s2Fhf/16/ – sergionni Jan 06 '12 at 14:28
@sergionni I mean that if you animate `left` to `50px`, have the default styling for that element to be `50px`, that way it will stop and persist on `50px`. – Madara's Ghost Jan 06 '12 at 15:06
1

IMHO -> please add the code and the explanation, until then it shouldn't be considered the accepted answer – GWorking Aug 02 '19 at 07:38
1

This does not work if there is an `animation-delay`. Best answer is below (animation-fill-mode: forwards;) – Javi Marzán Aug 27 '20 at 10:33

CSS3 Animate: How to have the object not revert to its initial position after animation has run?

3 Answers3

Linked