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 } } 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
더 많은 애니메이션 속성을 사용하는 경우약칭을 사용할 수 있습니다.
으아악다음과 같이 설정하세요:
bubble애니메이션 이름2s기간linear시간 기능0.5s지연1迭代次数（可以是 'infinite')normal방향forwards채우기 모드(끝 위치를 최종 상태로 사용하는 것과의 호환성을 원한다면 '뒤로'로 설정하세요. [이것은 애니메이션이 꺼진 브라우저를 지원하기 위한 것입니다.] {특정 사례가 아닌 제목에 대답하기 위한 것입니다.})사용 가능한 시간 기능:
으아악사용 가능한 방향:
으아악추가해 보세요
으아악animation-fill-mode: forwards;. 예를 들어 다음과 같은 약어를 사용할 수 있습니다.https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode