[CSS] 연속된 이미지 GIF처럼 만들기 (feat. animation)

Yeonsu Summer·2023년 2월 27일

기능구현 문제해결

CSS

목록 보기

3/5

발단

애플 클론코딩을 하던 중 다음과 같은 움짤을 발견하였다.

단순히 gif 파일을 다운받아서 사용하면 되겠다 생각하였지만, 애플은 gif가 아닌 다음과 같은 png를 사용하였다.

gif를 사용하면 화질이 낮아지기 때문에 png를 사용한 것 같다.

그런데 이렇게 연속된 이미지를 어떻게 gif 움짤처럼 만들었을까?

전개

마크업

이미지를 background로 깔고 사이즈와 위치를 조정한 것으로 추측하였다.

// Privacy.js
<figure className='w-[28px] h-[38px] bg-[length:224px_228px] bg-[url()]'></figure>

figure 사이즈에 딱 맞게 자물쇠가 들어갔다.
아직 background-position을 정하지 않았기 때문에 기본값인 0px 0px, 즉 좌측 상단의 자물쇠가 보이게 된다.

애니메이션

애니메이션은 0%에서 100%가 될 때까지 다음과 같이 위치를 변경한다.
귀찮지만 위치 하나하나 적용해야 한다.

// tailwind.config.js
...
		lock: {
          '0%': {
            'background-position': '0px 0px',
          },
          '2.08333%': {
            'background-position': '-28px 0px',
          },
          '4.16667%': {
            'background-position': '-56px 0px',
          },
          '6.25%': {
            'background-position': '-84px 0px',
          },
          '8.33333%': {
            'background-position': '-112px 0px',
          },
          '10.4167%': {
            'background-position': '-140px 0px',
          },
          '12.5%': {
            'background-position': '-168px 0px',
          },
        ...
          '87.5%': {
            'background-position': '-56px -190px',
          },
          '89.5833%': {
            'background-position': '-84px -190px',
          },
          '91.6667%': {
            'background-position': '-112px -190px',
          },
          '93.75%': {
            'background-position': '-140px -190px',
          },
          '95.8333%': {
            'background-position': '-168px -190px',
          },
          '100%': {
            'background-position': '-196px -190px',
          },
        },
...

// Privacy.js
<figure className='animate-[lock_2000ms_0ms_ease-in-out_forwards] w-[28px] h-[38px] bg-[length:224px_228px] bg-[url()]'></figure>

위기

위 코드를 실행하면 다음과 같다.

애니메이션을 적용했으니 당연히 부드럽게 위치를 옮긴다. 하지만 이것은 내가 바라는 모션이 아니다.

위치가 바뀔 때마다 끊기도록 구현할 방법을 고민하다가 번거롭지만 다음과 같이 해결하였다.

결말

		lock: {
          '0%': {
            'background-position': '0px 0px',
          },
          '2.05%': {
            // new!
            'background-position': '0px 0px',
          },
          '2.08333%': {
            'background-position': '-28px 0px',
          },
          '4.11%': {
            // new!
            'background-position': '-28px 0px',
          },
          '4.16667%': {
            'background-position': '-56px 0px',
          },
          ...
          '91.6667%': {
            'background-position': '-112px -190px',
          },
          '93.7%': {
            // new!
            'background-position': '-112px -190px',
          },
          '93.75%': {
            'background-position': '-140px -190px',
          },
          '95.78%': {
            // new!
            'background-position': '-140px -190px',
          },
          '95.8333%': {
            'background-position': '-168px -190px',
          },
          '99.95%': {
            // new!
            'background-position': '-168px -190px',
          },
          '100%': {
            'background-position': '-196px -190px',
          },
        },