css display none: transition
css로 메뉴바 드롭 다운, 버튼 클릭시 메뉴 생성등을 웹에 적용하는것은 쉽다.
하지만 그것을 자연스럽게 적용 시키기위해서는 transition을 사용해야한다.
css 트랜지션
- css 속성을 변경할때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가
일정 기간에 걸쳐 일어나도록 할 수있다. 예를 들어, 어떤 요소의 색상을 흰색에서 검정색으로 변경한다면, 변화는 대개 즉시 일어난다.
css 트랜지션을 이용하면, 모두 커스터마이즈 가능한 시간 주기마다 변화가 일어난다.
auto값은 매우 복잡한 값이다. 애니메이션에 auto를 사용하면 이는 브라우저와 버전에 따라 예상하지 못한 결과를 초래할 수 있으며
피해야한다.
- 트랜지션 정의에 사용한 css속성
transition : property timing-function duration delay | initial | inherit
- property : tarnsition을 적용시킬 속성을 정한다.
- timing-function : transiton의 진행 속도를 정한다.
- duration : transition의 총 시간을 정한다.
- delay : trasition의 시작을 연기한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.
- transition-property : none | all | porperty | initial | inherit
1) none : 모든 속성에 적용하지 않습니다
2) all : 모든 속성에 적용한다.
3) property : 속성을 정한다. 여러 개의 속성을 지정할 경우 쉼표로 구분한다.
4) initial : 기본값으로 설정한다.
5) inherit : 부모 요소의 속성값을 상속받는다.
- transition-timing-function : ease | linear | ease-in | ease-out | step-start | step-end | steps(n, start | end)
| cubic-bezier( n, n, n, n) | initial | inherit
- 기본값은 ease입니다.
- 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 )과 같습니다.
- step-start : steps( 1, start )와 같습니다.
- step-end : steps( 1, end )와 같습니다.
- steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
- cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
-transition-duration : time | initial | inherit
1) 기본값은 0s이다.
2) 시간단위는 초(s) 또는 1/1000초(ms)를 사용한다.
3) initail : 기본값으로 설정한다.
4) inherit : 부모 요소의 속성값을 상속받는다.
- transition-delay : time | initial | inherit
1) 기본값은 0s이다.
2) 시간단위는 초(s) 또는 1/1000초(ms)를 사용한다.
3) initail : 기본값으로 설정한다.
4) inherit : 부모 요소의 속성값을 상속받는다.