2024-09-21 21:31

우측 상단에서 좌측 하단 방향으로 서서히 커지면서 나타나는 애니메이션 설정 방법

이 애니메이션을 구현하기 위해서 알아야 할 중요한 CSS

transform
transition

transform 속성

transform은 ‘변형’ 이라는 뜻으로 다양한 변형함수를 통해 element들을 변형시킬 수 있다.

자주 쓰이는 몇 가지 변형함수만 알아보자

scale - element의 크기를 확대하거나 축소한다.
ex)
scale(1) - 기존 크기를 나타낸다.
scale(0.7) - 기존 크기의 70% 크기를 나타낸다. (축소)
scale(2) - 기존 크기의 200% 크기(2배)를 나타낸다. (확대)
scale(1.3, 0.4) - 기존 크기에서 x축으로 130%, y축으로 40의 크기를 나타낸다.
translate - element를 이동한다.
ex)
translate(0) - 기존 위치를 나타낸다.
translate(100px) - x축으로 100px 이동한 위치를 나타낸다. (y축 이동은 0, = t)
translate(50px, 50%) - x축으로 100px, y축으로 자신의 height의 50% 이동한 위치를 나타낸다.
rotate - element를 회전한다.
ex)
rotate(0) - 기존 상태를 나타낸다. (회전 하지 않음)
rotate(90deg) - 시계 방향으로 90도 회전한 상태를 나타낸다.
rotate(-0.25turn) - 반시계 방향으로 1/4 회전한 상태를 나타낸다.

이외에도 skew, matrix 등 다양한 변형함수가 존재한다.

transition 속성

transition은 element의 두 가지 상태 사이의 전이(transition)을 정의할 수 있다.

이러한 다른 두 가지 상태는 :hover와 같은 가상 클래스나 자바스크립트를 활용해 정의할 수 있다.

transition 속성은 다음과 같은 속성들을 설정할 수 있다.

transition-property - transition될 속성
transition-duration - a에서 b 상태로 transition되기까지의 시간(duration)
transition-timing-function - transition의 중간값을 계산하는 방법을 정의하는 함수(어떠한식으로 transition될 지 나타내는 함수) ex) ease-in, linear..
transition-delay - transition 효과를 나타내기 전 대기하는 시간(duration)

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

우측 상단에서 좌측 하단 방향으로 서서히 커지면서 나타는 애니메이션을 어떻게 구현할 수 있을까?

두 가지 상태를 나타내기 위해 hidden과 visible 클래스를 정의한다.
```
.hidden {}
.visible {}
```

두 가지 상태의 전이는 다음과 같이 자바스크립트를 활용한다.

const historyBtn = document.querySelector('.history_btn');
const historyCloseBtn = document.querySelector('.history_header_close_btn');
const history = document.querySelector('.history');

historyBtn.addEventListener('click', openHistory);
historyCloseBtn.addEventListener('click', closeHistory);

function openHistory() {
  history.classList.remove('hidden');
  history.classList.add('visible');
}

function closeHistory() {
  history.classList.remove('visible');
  history.classList.add('hidden');
}

서서히 커지면서 나타내는 효과를 주기 위해 scale() 변형 함수와 opacitiy 속성을 각 클래스에 정의한다.
```
.hidden {
  transform: scale(0);
  opacity: 0;
}

.visible {
  transform: scale(1);
  opacity: 1;
}
```
transition 속성을 활용해 transform과 opacity 속성이 0.5s동안 ease하게 transition되도록 한다.
```
.history {
  // ...
  
  transition: transform 0.5s ease, opacity 0.5s ease;
}
```
transform-origin속성을 활용해 element transformation이 적용될 지점을 우측 상단(top right)로 설정한다.
```
.history {
  // ...
  
  transform-origin: top right;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
```

참조

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

https://velog.io/@harinnnnn/HTML-CSS-transform과-변형함수

transform

transition