12-6 CSS 속성 - 전환

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
           : 기본값            : 일반            : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

※ 전환

• transition

      → 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

      → transition : 속성명 지속시간(필수 포함) 타이밍함수 대기시간;

      → transition- property

      → transition- duration

      → transition- timing-function

      → transition- delay

 

• transition-property

      → 전환 효과를 사용할 속성 이름을 지정

      →  all  : 모든 속성에 적용

      →  속성이름  : 전환 효과를 사용할 속성이름을 명시

 

• transition-duration

      → 전환 효과의 지속시간을 지정

      →  0s  : 전환 효과없음

      →  시간  : 지속시간(s)을 지정

 

• transition-timing-function

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

      →  ease  : 느리게 - 빠르게 - 느리게 = cubic-bezier(0.25, 0.1, 0.25, 1)

      →  linear  : 일정하게 = cubic-bezier(0, 0, 1, 1)

      →  ease-in  : 일정하게 = cubic-bezier(0.42, 0, 1, 1)

      →  ease-out  : 일정하게 = cubic-bezier(0, 0, 0.58, 1)

      →  ease-in-out  : 일정하게 = cubic-bezier(0.42, 0, 0.58, 1)

      →  cubic-bezier(n, n, n, n)  : 자신만의 값을 정의(0~1)

      →  steps(n)  : n번 분할된 애니메이션

 

※ 타이밍 함수에 관하여 참고하면 좋은 사이트

https://easings.net/ko

Easing Functions Cheat Sheet

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

- CSS: Cascading Style Sheets | MDN

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

Docs

 

• transition-delay

      → 전환 효과가 몇 최 뒤에 시작할 지 대기시간을 지정

      →  0s  : 대기시간 없음

      →  시간  : 대기시간(s)을 지정