Animation

[CSS] z-index에 딜레이 적용시키기

코드 See the Pen CSS z-index Delay by hyukson (@hyukson) on CodePen. 코드 풀이 .zIndexDelay { animation: zIndex .5s step-end forwards; } @keyframes zIndexDelay { to { z-index: 5; } } animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다. JavaScript 사용하여 구현하기 .zIndex { z-index: 22; } CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다. ..

[Next.js] 이미지 로딩 애니메이션 구현하기

이미지를 리스트 형식으로 나열 할때, next.js 의 Image 컴포넌트를 사용하면 이미지를 캐싱 하게됩니다. 문제는 로드와 캐싱되는 시간 동안 사용자는 이미지 대신 비어 있는 공간을 보게됩니다. 해당 상황을 방지하기 위해서 로드되는 동안 로딩이 되고 있다는 애니메이션이 보이는 기능을 구현해보겠습니다. 코드 import Image from "next/image"; import { useRef } from "react"; export default const Poster = () => { const ref = useRef(null); return ( ref.current.remove()} /> ); } 일단 임시로 Poster 라는 컴포넌트를 하나 만들어 주고, 해당 컴포넌트에는 이미지와 로딩 애니메이션..