카테고리 없음

transition 정리

pcy 2022. 7. 27. 09:35

1.transition (그룹속성 property / duration / timing-function / delay)

duration과 delay는 같은 단위를 사용하기 때문에 duration delay 순서로 적용된다.

하나의 값만 들어있다면 duration값만 적용이 된다.

 

2.transition-property (대상이 되는 속성 설정)

-all : 기본값이며, 모든속성에 적용

-none : 모든 속성에 적용x

-property : 여러 개의 속성을 지정할 경우 사용 ex)transition-property:width height;

-initial : 기본값으로 설정

-inherit : 부모 요소의 속성값을 상속

 

3.transition-duration (지속 시간 설정)

트랜지션이 일어나는 일정 시간을 초(s) 또는 밀리초(ms)로 지정한다.

 

4.transition-timing-function (시간당 속도 함수 설정)

-ease : 기본값, slow > fast > slow

df