[CSS속성] 전환(transition), 변환(transformation), Overwatch

21. 전환

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

transition-property

• all : 모든 속성에 적용
• 속성이름 : 전환 효과를 사용할 속성 이름 명시

2. 전환 효과의 지속시간을 지정

transition-duration

• 0s : 전환 효과 없음
• 시간 : 지속 시간(s)을 지정

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

transition-timing-function

• ease : 느리게-빠르게-느리게
• linear : 일정하게
• ease-in : 느리게-빠르게
• ease-out : 빠르게-느리게
• ease-in-out : 느리게-빠르게-느리게
• cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1)
• steps(n) : n번 분할된 애니메이션

4. 전환 효과가 몇 초 뒤에 시작할지 대기 시간을 지정

transition-delay

• 0s : 대기시간 없음
• 시간 : 대기시간(s)을 지정

---

22. 변환(1) ~ 23. 변환(2)

1. 하위 요소를 관찰하는 원근 거리를 지정(속성)

 

perspective

• 단위 : px 등 단위로 지정
• 함수가 아닌 속성

2. 3D 변환으로 회전된 요소의 뒷면 숨김 여부

backface-visibility

• visible : 뒷면 보임
• hidden : 뒷면 숨김