2022-11-02: styled-components에서 keyframe 적용하기

keyframe과 animaition

현재까지 공부해오던 과정 중에 CSS를 조금씩 건드려볼 수 있는 시간들이 생기기 시작했다. 물론 다른 언어가 중요하기는 하지만, 눈에 보기 좋은 떡이 먹기도 좋다고 기존에 신경쓰지 못했던 디테일들을 이제는 공부해보고 싶다고 생각해 요 근래, keyframe과 animation을 직접 사용해봤다.

React에서는 styled-components를 이용해 CSS in JS로 활용하는 경우가 많은 만큼, 이번에는 styled-components 내에서 어떻게 keyframe을 배치하고 사용할 수 있는지를 작성해보도록 하겠다.

📼 일단은 keyframe과 animation부터 짚고 가자

@keyframe
- keyframe은 CSS에서 사용자가 자신이 원하는 UI/UX 연출을 구현하기 위한 기능이라고 보면 된다.
- CSS에서 keyframe을 설정할 때는 아래와 같이 쓰인다.
```
@keyframe dragup {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 335px;
  }
}
```
  - from {} to {}로 하여 시작과 끝만을 설정할 수 있다.
  - 만약, 중간중간에 다른 효과를 넣고 싶다면 위의 코드처럼 ‘25%’, ‘50%’, ‘75%’처럼 각 비율을 적어 구간을 나눠 설정할 수 있다.
  - 블록{} 속에는 여러 CSS Attribute를 추가할 수 있다. 이 때, 제작한 keyframe을 가지고 animation에 적용하면 keyframe animation이 진행됨에 따라 각 블록 속에 있는 CSS Attribute들이 적용된다.

animation

animation은 CSS에서 특정 UX나 UI에 동작을 부여하기 위한 속성이다.

animaition 속에는 아래의 부가 기능들이 존재한다.

animation: name duration timing-function delay iteration-count direction fill-mode play-state

프로퍼티	설명
animation-name	@keyframes 애니메이션 이름을 지정한다
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
animation-iteration-count	애니메이션 재생 횟수를 지정한다.
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.

애니메이션을 작동하려면 반드시 animation-duration에 0이 넘는 숫자를 필수적으로 작성해야 한다. 그렇지 않으면 시간이 흐르지 않으므로 작동하지 않는다.

예시
- keyframe과 animation을 이용해 왼쪽에 없던 글자가 오른쪽으로 이동하면서 점점 뚜렷하게 나타나는 애니메이션을 만들어보고자 한다.
- 해당 내용을 작성하기 위해 html 속에 다음의 내용을 작성했다.
```
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./style.css" rel="stylesheet">
  <title>Drunken_Neoguri - CSS KeyFrame Practice</title>
	<style>
		html {
		  background: hsl(259, 51%, 12%);
		  color: white;
		}

		.keyframe_test {
		  position: relative;
		  animation: fixslide 5s 1 forwards;
		  margin: 0 300px;
		}

		@keyframes fixslide {
		  0% {
		    left: 0px;
		    opacity: 0;
		  }
		  100% {
		    left: 200px;
		    opacity: 1;
		  }
		}
	</style>
</head>

<body>
  <h1 class="keyframe_test">키프레임 테스트</h1>
</body>

</html>
```
  - animation으로 keyframe을 이용해 만든 fixslide를 설정했다.
  - 지속시간은 5초이며, 무한히 반복할 것은 아니므로 iteration count는 1로 잡았다.
  - 애니메이션 동작이 마치면 마친 위치에 그대로 남아있길 원하므로 animation-fill-mode는 forwards로 잡았다.
- 위의 내용을 만들고 사이트를 가보면 글자가 아래와 같이 동작한다.
  
  이렇게 글씨가 서서히 나타나는 효과를 keyframe과 animation을 통해 만들어낼 수 있다.

🎬 styled-components에서의 keyframe 세팅

이전에 진행했던 실전 프로젝트인 MIMIC에서 아쉬웠던 점이 하나 있었다면, CSS Animation 처리가 없다시피 했던 것이었다.

그 부분이 아쉬웠는데 이번에 위의 내용을 배웠으니 연습할 겸, 제작한 프로젝트에 반영을 해보고자 한다.

우선 keyframe을 반영하기 위해 아래와 같이 util 폴더에 keyframe.jsx 파일을 추가해 keyframe을 등록했다.

import { keyframes } from "styled-components";

export const BackgroundBlur = keyframes`
  0% {

  }
  100% {
    backdrop-filter: blur(3px);
  }
`;

export const dragUp = keyframes`
  0% {
    bottom: -335px;
  }
  100% {
    bottom: 0;
  }
`;

팝업창의 뒷배경으로 출력되는 어두운 부분에 흐림 효과를 부여할 keyframe 변수를 선언했고, 팝업창에는 아래에서 위로 올라오는 효과를 부여할 keyframe 변수를 선언했다.

이제 제작한 keyframe을 사용하기 위해 FeedPageContainer.jsx에 있는 일부 styled-components에 animation을 추가했다.

keyframe과 animaition

목차

📼 일단은 keyframe과 animation부터 짚고 가자

🎬 styled-components에서의 keyframe 세팅