[카카오테크캠퍼스 4주차] CSS 속성: 전환과 변환

⏳ 2023. 5. 1. - 2023. 5. 7.

 

전환

transition

• transition: transition-property transition-duration transition-timing-function transition-delay;

transition-timing-function

 전환 효과의 타이밍(Easing) 함수를 지정

• transition-timing-function: ease; -> 느리게-빠르게-느리게

타이밍 함수에 대해 더 자세히 알아보려면?

https://easings.net/

Easing Functions Cheat Sheet

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

<easing-function> - CSS: Cascading Style Sheets | MDN

https://greensock.com/docs/v2/Easing

Docs

스타벅스 예제에 사용했던 것도 있다!

---

변환

transform

matrix의 작성법이 복잡해서.. 각종 함수로 분류한 것이라고 한다.

실제 브라우저에 적용될 때는 matrix로 변환되어서 적용된다고~ (몰랐음 충격)

perspective

perspective: 600px;

transform: perspective(600px);

이 둘은 무슨 차이가 있을까? -> 관찰 대상이 다르다!!