[CSS] transform 속성

● transform 속성 ●

1. transition-property

  : 전환 효과의 대상 속성명을 값으로 지정 (none, all)

transition-property : <속성값>;

/* none - 전환 효과 속성을 지정하지 않습니다 */
/* all - 모든 속성을 전환 효과 대상으로 지정 */

 

2. transition-duration

  : 전환 효과가 진행되는 시간을 지정

transition-duration : <시간>;

 

3. transition-delay

  : 전환 효과가 지연되는 시간을 지정

transition-delay : <시간>;

 

4. transition-timing-function

  : 전환 효과 속도를 지정 (liner, ease, ease-in, ease-out, ease-in-out, cubic-bezier)

transition-timing-function : ;

/* linear - 처음 속도와 마지막 속도가 일정하다 */
/* ease - 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려진다 */
/* ease-in  - 처음에는 속도가 느리지만 완료될 때까지 점점 빨라진다 */
/* ease-out  - 처음에는 속도가 빠르지만 완료죌 때까지 점점 느려진다 */
/* ease-in-out - 처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려진다 */
/* cubiz-bezier - 사용자가 정의한 속도로 진행한다 */

https://cubic-bezier.com 에 접속하면 cubiz-bezier() 값을 구해준다

 

5. transition

  : 모든 전환 효과 속성을 한번에 지정 할 수 있는 단축 속성