마지막 프레임에서 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-

시작 및 중지와 같은 애니메이션의 측면을 찾은 다음 '중지'이벤트가 시작되면 원하는 모든 것을 dom에 수행 할 수 있습니다. 나는 얼마 전에 이것을 시도했지만 작동 할 수는 있지만 당분간 웹킷으로 제한 될 것이라고 생각합니다 (그러나 아마도 이미 수락했을 것입니다). Btw, 나는 2 개의 답변에 대해 동일한 링크를 게시 했으므로이 일반적인 조언을 제공 할 것입니다 .W3C를 확인하십시오. 규칙을 작성하고 표준을 설명합니다. 또한 웹킷 개발 페이지는 매우 중요합니다.

실제로 아무도 그것을 가져 오지 못했습니다. 작동 방식은 일시 중지로 설정된 애니메이션 재생 상태 입니다.

필자는 채우기 모드에 사용하려는 제한이 있다는 것을 오늘 배웠습니다. 이것은 Apple 개발자의 것입니다. 소문은 * 약 * 6이지만 확실하지는 않습니다. 또는 클래스의 초기 상태를 애니메이션 종료 방법으로 설정 한 다음 / 0 %에서 * initialize *로 설정할 수 있습니다.