마지막에 CSS 애니메이션을 최종 상태로 유지

Question

CSS에서 opacity: 0;로 설정된 일부 요소에 애니메이션을 적용하고 있습니다. 불투명도를 0에서 1로 변경하는 키프레임을 사용하여 애니메이션 클래스가 onClick 이벤트에 적용됩니다.

안타깝게도 애니메이션이 끝나면 요소는 opacity: 0 상태로 돌아갑니다(Firefox와 Chrome 모두에서). 내 본능은 애니메이션 요소가 원래 속성을 무시하고 최종 상태로 유지된다는 것입니다. 이것이 사실이 아닌가? 그렇지 않다면 어떻게 요소를 최종 상태로 유지할 수 있습니까?

코드(접두사 버전 제외):

@keyframes 버블 {
    0% { 변환:스케일(0.5); 불투명도:0.0 }
    50% { 변환:크기(1.2):0.5;
    100% { 변환:크기(1.0); 불투명도:1.0 }
}

Answer 1

더 많은 애니메이션 속성을 사용하는 경우 약칭 을 사용할 수 있습니다.

으아악

다음과 같이 설정하세요:

• bubble 애니메이션 이름
• 2s 기간
• linear 시간 기능
• 0.5s 지연
• 1 迭代次数（可以是 'infinite')
• normal방향
• forwards 채우기 모드(끝 위치를 최종 상태로 사용하는 것과의 호환성을 원한다면 '뒤로'로 설정하세요. [이것은 애니메이션이 꺼진 브라우저를 지원하기 위한 것입니다.] {특정 사례가 아닌 제목에 대답하기 위한 것입니다.})

사용 가능한 시간 기능:

으아악

사용 가능한 방향:

으아악

Answer 2

추가해 보세요 animation-fill-mode: forwards;. 예를 들어 다음과 같은 약어를 사용할 수 있습니다.

으아악

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