How to prevent css3 animation reset when finished?

Question

I write a css3 animation and it is only performed once. The animation works well, but it will reset when the animation finished. How can I avoid this, I want to keep the result instead of reset it.

$(function() {
  $("#fdiv").delay(1000).addClass("go");
});

#fdiv {
  width: 10px;
  height: 10px;
  position: absolute;
  margin-left: -5px;
  margin-top: -5px;
  left: 50%;
  top: 50%;
  background-color: red;
}

.go {
  -webkit-animation: spinAndZoom 1s 1;
}

@-webkit-keyframes spinAndZoom {
  0% {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    -webkit-transform: rotateZ(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="fdiv"></div>

Here is the demo.

People from the future, please, don't use any vendor prefix from those answers. If your target browser still require those then use an automated tool to put those, like [Autoprefixer](https://github.com/postcss/autoprefixer). — Gustavo Rodrigues, Mar 15 '15 at 14:04

Eric Hotinger · Accepted Answer · 2015-07-27T14:57:48.487

161

Add animation-fill-mode: forwards;

to your .go

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

http://css-infos.net/property/-webkit-animation-fill-mode

edited Jul 27 '15 at 14:57

answered Jun 25 '13 at 12:14

Eric Hotinger

8,957
5
36
43

score 5 · Answer 2 · edited Jun 25 '13 at 12:16

5

Add the following style to your stylesheet:

.go {
     /* Already exists */
     -webkit-animation: spinAndZoom 1s 1;

     /*New content */
     -webkit-animation-fill-mode: forwards;
 }

edited Jun 25 '13 at 12:16

JeffRSon

10,404
4
26
51

answered Jun 25 '13 at 12:15

maqjav

2,310
3
23
35

ShibinRagh · Answer 3 · 2015-12-10T12:02:14.533

4

Add animation-fill-mode: forwards;

.go {
     -webkit-animation-fill-mode: forwards;
 }

edited Dec 10 '15 at 12:02

answered Jun 25 '13 at 12:42

ShibinRagh

6,530
4
35
57

How to prevent css3 animation reset when finished?

3 Answers3

Linked

Related