/
본 컨텐츠는 nomadcoder의 React JS 마스터 클래스를 수강 후 개인 학습 용도로 재구성하였습니다.
/
한 자리에서 무한하게 도는 animation을 구현!
keyframes:개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있게 합니다.
transform: 이차원 좌표에서 요소를 변형시키는 프로퍼티이다.
값에는 translate(), scale(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해 이동, 확대축소, 회전, 경사를 만들 수 있다.
rotate: css의 rotate() 함수는 각도를 지정해 요소를 회전시킬수 있는 함수이며 플러스 각도를 지정하면 시계방향으로, 마이너스 각도를 지정하면 시계 반대 방향으로 회전합니다. 회전의 기준점은 객체의 중심입니다.
border-radius: CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.
0%, 50% 100% : 각 지점별 예를 들면 아래의 예시에서는 rotate를 통해서 회전하며 0지점에서 발생하는 css event와 50%일때, 그리고 100%일때 각각을 표현하고 있습니다.
&:hover : 마우스 커서를 올릴 때 이벤트
opacity: 투명도
1s linear infinite: 1초동안 일정한 속도로 무한히
라고 해석됨 참고
import styled, {keyframes} from 'styled-components';
const Wrapper = styled.div`
display: flex;
`;
const rotationAnimation = keyframes`
0% {
tansform: rotate(0deg);
border-radius: 0px;
}
50% {
border-radius: 100px;
}
100% {
transform: rotate(360deg);
border-radius: 0px;
}
`;
const Box = styled.div`
height: 200px;
width: 200px;
background-color: tomato;
display: flex;
justify-content: center;
align-items: center;
animation: ${rotationAnimation} 1s linear infinite;
span{
font-size: 36px;
&:hover {
font-size: 72px;
}
&:active {
opacity: 0;
}
}
`;
function App() {
return (
<Wrapper>
<Box >
<span>🤩</span>
</Box>
</Wrapper>
);
}
export default App;