animation이 끝난 시점의 속성값 유지하기

1302 단어 CSS CSS

forwards 속성값

animation은 기본적으로 애니메이션이 끝나면 기존의 속성값으로 돌아간다.
애니메이션이 끝난 시점의 상태를 유지하고 싶다면 animation 속성의 forwards 속성값을 사용한다.

@keyframed hideSplash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#splash {
  animation: hideSplash 1s forwards;
}

forwards 속성값을 사용하면 애니메이션이 끝난 시점의 속성값을 유지할 수 있다.

위의 경우 opacity 속성의 속성값이 0으로 유지되어 애니메이션이 끝나면 보이지 않는 상태가 유지된다.

이 문제에 관하여(animation이 끝난 시점의 속성값 유지하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jhm971102/animation이-끝난-시점의-속성값-유지하기

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다