CSS 애니메이션 만들기

더 액트브한 화면을 만들어보고싶어져서 애니메이션을 사용해보기로 했다.

간단하게 버튼을 누르면, 그 버튼에 따른 애니메이션으로 이모지가 움직이는 화면을 만들어보려고 한다.

몇 가지 궁금한 점이 있다면

• 애니메이션과 transform? (성능 등)
• ::before ::after의 정확한 개념
• 애니메이션 사용에 있는 정해진 규칙

이렇게 2개가 있다.

1. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
2. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
3. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.

.

애니메이션을 만들기 위해 필요한 것

✅ animation 속성 + 속성의 하위 속성 (총 시간, 반복 여부 등) + 애니메이션의 중간 상태 (@keyframse)

-> @keyframes는 중간 상태가 어떻게 보일지 만들어준다. from to로 설정할 수 있고, 0%~100%로 설정할 수 도 있다.
나는 활동을 좀 더 나누고싶어서 %를 사용해봤다.

속성의 종류들은 mdn docs를 참고하였다.

⭐️ 주의
오래 된 브라우저에서는 역자: -webkit-, -moz- 등의 접두어가 필요하다.

// 내가 사용한 예시 

.hi {
  position: absolute;
  animation-duration: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-name: hi;
  -moz-animation-name: hi;
  -webkit-animation-name: hi;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
}

@keyframes hi {
  0% {
    margin-left: 90%;
  }

  100% {
    margin-left: 0%;
  }
}

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

transform

transform 속성은 요소의 회전, 크기 조절, 기울이기, 이동 효과를 넣을 수 있다.
(하지만 kyeframe을 이용해서도 가능한 부분도 있었다. 이럴 경우 어떤 것을 사용하는게 더 성능에 좋을까?)

transeform에도 굉장히 많은 속성이 있다.
나는 그중에서 transeform: rotate(<angle>turn/deg)를 사용해봤다.

• 양수: 시계반향
• 음수: 시계반대반향
  -> 여기서도 turn과 deg를 사용할 수 있다.
  turn은 1회전, 즉 360deg를 의미한다.