완료되면 CSS3 애니메이션 재설정을 방지하는 방법은 무엇입니까?

완료되면 CSS3 애니메이션 재설정을 방지하는 방법은 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• 마지막 프레임 8 답변 에서 CSS3 애니메이션 중지

css3 애니메이션을 작성하고 한 번만 수행됩니다. 애니메이션은 잘 작동하지만 애니메이션이 완료되면 재설정됩니다. 이것을 어떻게 피할 수 있습니까? 재설정하는 대신 결과를 유지하고 싶습니다.

$(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>

다음은 데모 입니다.

---

더하다 animation-fill-mode: forwards;

너의 ~에게 .go

애니메이션의 최종 키 프레임은 애니메이션의 최종 반복이 완료된 후에도 계속 적용됩니다.

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

---

스타일 시트에 다음 스타일을 추가하십시오.

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

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

---

애니메이션 채우기 모드 추가 : 앞으로;

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

참고 URL : https://stackoverflow.com/questions/17296919/how-to-prevent-css3-animation-reset-when-finished