CSS 애니메이션 종료 시 최종 상태 유지

CSS 애니메이션 종료 시 최종 상태 유지

다음으로 설정된 일부 요소에 대해 애니메이션을 실행하고 있습니다.opacity: 0;CSS에클릭 시 애니메이션 클래스가 적용되며 키프레임을 사용하여 불투명도를 다음과 같이 변경합니다.0로.1(무엇보다도)

안타깝게도 애니메이션이 끝나면 요소들은 다시opacity: 0(Firefox와 Chrome 모두에서).저의 자연스러운 생각은 애니메이션 요소가 원래의 특성을 무시하고 최종 상태를 유지한다는 것입니다.사실이 아닌가요?만약 그렇지 않다면 어떻게 요소를 그렇게 하도록 할 수 있습니까?

코드(접두사 버전은 포함되지 않음):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

추가해 보기animation-fill-mode: forwards;. 예를 들어, 속기는 다음과 같이 사용됩니다.

animation: bubble 1.0s forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

더 많은 애니메이션 특성을 사용하는 경우 축약어는 다음과 같습니다.

animation: bubble 2s linear 0.5s 1 normal forwards;

다음과 같은 이점이 있습니다.

• bubble애니메이션이름
• 2s지속
• linear타이밍 기능
• 0.5s지연시키다
• 1반복 카운트('일 수 있음)infinite')
• normal방향
• forwards채우기 모드(종료 위치를 최종 상태로 사용할 수 있는 호환성을 원하는 경우 'backwards'을 설정합니다. [이는 애니메이션이 꺼진 브라우저를 지원하기 위한 것입니다.]{그리고 제목만 대답하고 특정 경우는 대답하지 않도록 설정합니다.}

사용 가능한 타이밍 기능:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

사용가능한 길안내

normal | reverse | alternate | alternate-reverse

쇼트 핸드 버전을 사용하지 않을 경우:animation-fill-mode: forwards애니메이션 선언 후가 아니면 작동하지 않습니다...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

대

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

애니메이션 채우기 모드 사용: 전달;

animation-fill-mode: forwards;

요소는 마지막 키프레임으로 설정된 스타일 값(애니메이션-방향 및 애니메이션-반복-카운트에 따라 다름)을 유지합니다.

참고: @keyframes 규칙은 Internet Explorer 9 이전 버전에서는 지원되지 않습니다.

작업예시

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

를 사용하는 데 문제가 있었습니다.forwards: 적어도 Chrome에서는 애니메이션이 끝난 후에도 렌더러가 그래픽 리소스를 빨아들이는 바람에 애플리케이션의 반응성이 떨어졌습니다.

이 문제를 일으키지 않는 접근법은EventListener.

CSS 애니메이션은 이벤트를 내보내므로 애니메이션 종료 이벤트를 사용하여 애니메이션이 종료될 때 개입할 수 있습니다.

CSS

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

자바스크립트

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {
    // Set your final state here. For example:
    element.style["opacity"] = 1;
}, { once: true });

옵션을once: true는 이벤트 수신기가 실행된 후 엔진에 이벤트 수신기를 제거하도록 지시하여 응용 프로그램을 새로고침 및 청결하게 유지합니다.

JSFiddle이 어떻게 작동하는지 보여주기 위해 만들었습니다.

언급URL : https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css-animation