Transition & Transform

전환(Transition)

CSS에서는 전환 속성을 이용하여 요소의 속성값을 변화시킬 수 있다.
전환 속성은 다음과 같음.

 

transition 
transition-delay : 전환 효과가 나타나기 전의 지연시간 설정
transition-duration : 전환 효과가 지속할 시간 설정
transition-property : 요소에 추가할 전환 효과 설정
transition-timing-function : 전환 효과의 시간 당 속도 설정

 

 

---

또한, 시간을 정해주어 효과의 시간 당 속도 설정도 가능하다.

 

1. linear : 일정한 속도로 진행

2. ease : 기본값(default)으로 slow-fast-slow

3. ease-in : 천천히 시작

4. ease-out : 천천히 끝남

5. ease-in-out : ease-in + ease-out 즉, 천천히 시작하고 천천히 끝남

6. cubic-bezier(n,n,n,n) : 사용자 정의 함수(cubic-bezier)에 따라 진행

 

linear

ease

ease-in

ease-out

ease-in-out

 

 

변환(Transform)

CSS에서는 변환 속성을 이용하여 요소의 속성값을 변화시킬 수 있다.
변환 속성은 다음과 같음.

크게 이동(Translate), 크기(Scale), 회전(Rotate), 비틀기(Skew) 효과로 나뉜다.

 

translate(x,y)

translateX(n)

translateY(n)

scale(x,y)

scaleX(n)

scaleY(n)

rotate(angle)

skew(x-angle,y-angle)

skewX(x-angle)

skewY(y-angle)

 

translate

scale

skew

rotate

complex