[React JS 마스터클래스] Animation and Pseudo Selectors

Hyeseong·2022년 3월 16일
0

react-js-masterclass

목록 보기
4/4

/
본 컨텐츠는 nomadcoder의 React JS 마스터 클래스를 수강 후 개인 학습 용도로 재구성하였습니다.
/

🚦Animation and Pseudo Selectors

한 자리에서 무한하게 도는 animation을 구현!

용어 정리

  1. keyframes:개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있게 합니다.

  2. transform: 이차원 좌표에서 요소를 변형시키는 프로퍼티이다.
    값에는 translate(), scale(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해 이동, 확대축소, 회전, 경사를 만들 수 있다.

  3. rotate: css의 rotate() 함수는 각도를 지정해 요소를 회전시킬수 있는 함수이며 플러스 각도를 지정하면 시계방향으로, 마이너스 각도를 지정하면 시계 반대 방향으로 회전합니다. 회전의 기준점은 객체의 중심입니다.

  4. border-radius: CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.

  5. 0%, 50% 100% : 각 지점별 예를 들면 아래의 예시에서는 rotate를 통해서 회전하며 0지점에서 발생하는 css event와 50%일때, 그리고 100%일때 각각을 표현하고 있습니다.

  6. &:hover : 마우스 커서를 올릴 때 이벤트

  7. opacity: 투명도

  8. 1s linear infinite: 1초동안 일정한 속도로 무한히라고 해석됨 참고

1️⃣ keyframes를 이용한 animation 기능


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;

2️⃣ 참고

profile
어제보다 오늘 그리고 오늘 보다 내일...

0개의 댓글