새로 추가된 HTML 요소 CSS로 애니메이션화

반응형

우리 모두는 새로 추가된 HTML 요소를 애니메이션화해야 하는 상황에 처해왔습니다. 우리는 클래스를 추가/제거하기 위해 타임아웃, 초기 상태 또는 기타 스크립트 논리를 수정한다.

만약 당신이 간단한 해결책을 원한다면, 여기 당신을 위한 해결책이 있습니다. 새로 추가된 요소를 처리하기 위해 하나의 애니메이션 키프레임만 사용합니다. CSS 애니메이션은 초기 요소 스타일을 기반으로 기본 상태를 관리합니다.

@keyframes animate {
    100% {
          opacity: 1;
    }
}

css 변환을 사용하여 속성을 재생하여 필요한 애니메이션을 얻을 수도 있습니다.

아래 예에는 두 가지 버전이 있습니다.
일반 항목은 불투명도를 사용하여 페이드인 효과를 만드는 반면, 팬시 항목에는 일부 변환 특성이 부착되어 있습니다.

 

즐겨! :)