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

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

나는 클릭으로 4개의 CSS3 애니메이션을 재생하고 있지만 애니메이션의 마지막 부분은 화면에서 제거하기 위한 것입니다.

하지만, 그것은 한 번 재생되면 항상 원래 상태로 돌아갑니다.마지막 CSS 프레임(100%)에서 어떻게 멈출 수 있는지, 아니면 한번 재생되면 전체 디바를 제거할 수 있는지 아는 사람이 있습니다.

@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;

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 - webkit-)
• IE 10.0
• Mozilla 16.0(5.0 -moz-)
• 샤파리 4.0 -웹킷-
• Opera 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/ #http-messages-

시작 및 중지와 같은 애니메이션의 측면을 확인할 수 있으며, 일단 '중지' 이벤트가 시작되었다고 말하면 돔에서 원하는 모든 것을 할 수 있습니다.얼마 전에 사용해 본 적이 있는데, 작동할 수는 있지만 당분간은 웹킷에 제한을 받게 될 것입니다(그러나 이미 수락하셨을 것입니다).그나저나, 제가 두 개의 답변에 대해 같은 링크를 올렸기 때문에, 저는 다음과 같은 일반적인 조언을 제공하고 싶습니다: W3C를 확인하세요 - 그들은 거의 규칙을 작성하고 표준을 설명합니다.또한 웹킷 개발 페이지는 매우 중요합니다.

아무도 그렇게 가져오지 않았습니다. 작동 방식은 애니메이션 재생 상태를 일시 중지로 설정했습니다.

채우기 모드에 사용할 수 있는 제한이 있다는 것을 오늘 알았습니다.이것은 Apple dev.에서 가져온 것입니다.소문은 6시경이지만 확실하지는 않습니다.또는 애니메이션을 종료할 방법으로 클래스의 초기 상태를 설정한 다음 *초기화 * 0%에서 시작할 수 있습니다.

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