240109 transform

사용상황

보시다시피 마이페이지라는 툴팁이 있다.

근데 지금은 그냥 문구만 띄워졌는데, 나는 저 문구가 위아래로 조금씩 움직이기를 원했다.

그래서 transform을 적용하려고 했고, styled-component에서 transform은 어떻게 적용하는지 정리하기 위해서 이 글을 쓰게 됐다

---

코드

import styled, { keyframes } from 'styled-components';

export const Container = styled.div`
  position: relative;
  display: inline-block;
`;

const floatingAnimation = keyframes`
  0% {
    transform: translate(-50%,-100%);
  }
  50% {
    transform: translate(-50%, -110%);
  }
  100% {
    transform: translate(-50%,-100%);
  }
`;

export const Content = styled.div`
  display: none;
  position: absolute;
  z-index: 200;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 80px;
  background-color: #391d93;
  border-radius: 20px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  animation: ${floatingAnimation} 1s ease-in-out infinite; /* 떠다니는 애니메이션 추가 */
  color: white;

  ${Container}:hover &,
  ${Container}:active & {
    display: block;
  }
`;

먼저 알아야 할건 keyframes다.
이건 뭐 styled-components에만 있는건 아니고 CSS의 일반적인 기능이다.

그럼 keyframes가 뭘까 ?

keyframes는 시간에 따라 스타일 변경을 어떻게 변할지를 설정할 수 있다.
이를 통해 웹 요소에 부드러운 애니메이션 효과를 적용할 수 있다.

transform은 ??

transform은 CSS 속성 중 하나로, 요소에 변형(transform)효과를 적용할 떄 사용된다.
이 속성을 사용하면 요소의 크기,회전,이동 및 기울임과 같은 변형을 쉽게 조절할 수 있다.

transform에는 translate(), rotate(), scale(), skew()가 있다.

translateX(이동하고자 하는 수치) 수평이동
translateY(이동하고자 하는 수치) 수직이동
translate(100% , 50%) X축으로 100%, y축으로 50% 이동

rotate(45deg)

scaleX(1.5) 가로 크기 1.5배로
scaleY(1.5) 세로 크기 1.5배로
scale(1.5) 둘 다 1.5배로

skewX(30deg) X 축으로 30도 기울여
skewY(30deg) Y 축으로 30도 기울여
skew(30deg, 20deg) x축으로 30도, y축으로 20도 기울여

위 코드의 예시를 보자

const floatingAnimation = keyframes`
  0% {
    transform: translate(-50%,-100%);
  }
  50% {
    transform: translate(-50%, -110%);
  }
  100% {
    transform: translate(-50%,-100%);
  }
`;

transform 속성 중 translate을 사용했고 X축과 y축으로 각각 이동한다
여기서 중요한 건, 갔다가 와야 한다는 것이다. 그래서 0%,50%,100% 3단계로 구분했다

animation: ${floatingAnimation} 1s ease-in-out infinite;

여기서 animation은 요소에 애니메이션을 "적용"하는 속성이다.
${floatingAnimation}는 사용할 애니메이션을 지정하는 부분
1s는 애니메이션 지속 시간을 나타낸다. 1초동안 floatingAnimation가 실행된다

ease-in-out은 처음에 천천히 , 중간에 가속, 끝날때 천천히
infinite는 무한반복

---

적용