프론트엔드의 꽃, 리액트 4주차 정리 (애니메이션 keyframes)

keyframes

• styled-components 안에 들어있음
• 웹에서 애니메이션을 구현할 때 transition과 animation이라는 스타일 속성을 많이 사용함
• transition은 단순한 엘리먼트 상태 변화 시, animation은 다이나믹한 효과를 줄 때 적합
• keyframes는 animation에서 사용하는 속성 중 하나!
• css에서 keyframes를 사용하는 방법

@keyframes boxFade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

 

styled-components에서 keyframes 사용하기

styled-components 패키지 설치

yarn add styled-components

위 아래로 움직이는 애니메이션

const Box = styled.div`
	width: 100px;
	height: 100px;
	border-radius: 50px;
	background: green;
	position: absolute;
	top: 20px;
	left: 20px;
	animation: ${boxFade} 2s 1s infinite linear alternate;
`;

• styled 안에서 변수를 이용하기 위해 ${변수이름} 형식으로 작성
• animation duration : 2s, 1s
• animation-iteration-count : infinite

const boxFade = keyframes`
	0% {
		opacity: 1;
		top: 20px;
	}
	50% {
		opacity: 0;
		top: 400px;
	}
	100% {
		opacity: 1;
		top: 20px;
	}
`;

 

스크롤 움직이기

• window.scrollTo() 이용

<button onClick={() => { window.scrollTo(0, 0); }}>위로가기</button>

• 웹페이지 상단으로 스크롤x 이동함

<button onClick={() => { window.scrollTo({top: 0, left: 0, behavior: "smooth"}); }}>위로가기</button>

• behavior을 추가해서 자연스러운 스크롤 구현
• 좌표뿐만 아니라 ref를 통해 특정 엘리먼트의 위치로 스크롤 시킬 수도 있다.