마지막 프레임에서 CSS3 애니메이션 중지

마지막 프레임에서 CSS3 애니메이션 중지

---

클릭하면 4 부분의 CSS3 애니메이션이 재생되지만 애니메이션의 마지막 부분은 화면에서 벗어납니다.

그러나 일단 재생되면 항상 원래 상태로 돌아갑니다. 누구든지 마지막 CSS 프레임 (100 %) 에서 중지하는 방법 또는 재생 된 전체 div를 제거하는 방법을 알고 있습니다 .

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

---

당신은 찾고 있습니다 :

animation-fill-mode: forwards;

canIuse의 MDN 및 브라우저 지원 목록에 대한 추가 정보 .

---

이 animation특성을 속기 특성 정의 에 추가하려는 경우 하위 특성의 순서는 다음과 같습니다.

animation-name- 기본 none

animation-duration- 기본 0s

animation-timing-function- 기본 ease

animation-delay- 기본 0s

animation-iteration-count- 기본 1

animation-direction- 기본 normal

animation-fill-mode- 당신은 이것을 설정해야합니다 forwards

animation-play-state- 기본 running

따라서 가장 일반적인 경우 결과는 다음과 같습니다.

animation: colorchange 1s ease 0s 1 normal forwards;

여기 에서 MDN 설명서를 참조 하십시오

---

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

브라우저 지원

• Chrome 43.0 (4.0-웹킷-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0-웹킷-
• 오페라 15.0 -webkit- (12.112.0 -o-)

용법:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

---

가장 좋은 방법은 최종 상태를 CSS의 주요 부분에 두는 것 같습니다. 여기 에서처럼 너비를에 넣으면 220px마침내가됩니다 220px. 그러나 시작0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

---

webkitAnimationName을 아무것도 다시 설정하여 객체의 CSS를 기본 상태로 다시 설정하는 문제는 아닙니다. 상태를 재설정하는 setTimeout 함수를 제거하면 끝나지 않은 상태로 유지되지 않습니까?

---

방금 비슷한 대답을 게시했으며 아마도 다음을 살펴보고 싶을 것입니다.

http://www.w3.org/TR/css3-animations/#animation-events-

You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.

---

Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.

---

I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain. Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .

참고URL : https://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame