How to prevent css3 animation reset when finished? [duplicate]

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.

Answer 1

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

Answer 2

Add the following style to your stylesheet:

.go {      /* Already exists */      -webkit-animation: spinAndZoom 1s 1;       /*New content */      -webkit-animation-fill-mode: forwards;  }