[css] 애니메이션 @keyframes

React App 처음 생성했을 때 이미지가 돌아가는 것에 대해 생각해 본적이 없었는데,

이제야 갑자기 궁금해져서 얘 gif 인가? 했는데 아니었다. 

css를 통한 애니메이션 효과였던 것이다. ㅇ0ㅇ

 

팀플 후에 css의 중요성을 깨달았고 이제 공부를 좀 하려고 한다.

우리 팀원들이 이미지 움직이는 것을 많이 넣었는데, 바빠서 확인을 못했었는데 모두 animation 이었다 ㅇ0ㅇ

우리 KPT 회고에서 제일 많은 투표를 받은 지난 코드도 다시보자! 

라는 Try 를 수행하기 위해 우리 팀 css 부분도 다시 뜯어봐야겠다^.^

 

1) 데이트 코스 등록이라는 글자를 띄워주는 StyledDateTitle 라는 styled-components 가 있다

<StyledDateTitle>데이트코스 등록 💟</StyledDateTitle>

 

2) 여기있다! shakeAnimation은 무었이냐~

const StyledDateTitle = styled.div`
  display: flex;
  justify-content: center;
  font-size: 30px;
  margin-top: 110px;
  color: var(--date-course-title);
  animation: ${shakeAnimation} 1.4s ease infinite;
`;

 

3) 바로 이거야~

전체 애니메이션 frame을 100이라고 했을때, 0에서 시작해서
-5px 이동했다가 5px 다시 이동해서 원점으로 오고 다시 -3px 이동했다가 다시 원점으로 오는
왕복 운동을 하는 infinite 무한 반복 애니메이션이다~!

const shakeAnimation = keyframes`
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(3px);
  }
`;

 

 

4) 이렇게 된다~!

gif 만들기 미숙,, 검은부분 없애고 싶다..-0-

 

 

5) 자세한 css 설명은 역시 펌모드!

아직 어떻게 사용해 볼지는 미정이지만 꼭 써본다.

딱 열었을 때 Todo list가 샤샤삭 나와서 왼쪽에 착 정렬 된다던지. .효과효과 아이디어 생각해보쟈아~

@keyframes => 시간순으로 정밀하게 애니메이션을 짜준다~!

CSS 애니메이션(@keyframes)🤸‍♀️