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를 통해 특정 엘리먼트의 위치로 스크롤 시킬 수도 있다.

+ Recent posts