[웹 프론트엔드] 인터랙티브 웹 개발) Transition

인터랙티브 웹 개발) Transition

📌 참고자료

• CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
  https://www.codingfactory.net/10953

transition

• 속성을 서서히 변화시키는 속성
  -> 수치로 정의된 속성인 경우에만 적용된다
• transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정한다
• IE는 버전 10부터 지원

transition-property

• transition을 적용시킬 속성
• none : 모든 속성에 적용하지 않음
• all : 모든 속성에 적용
• property : 속성을 정한다
  -> 여러 개의 속성을 지정할 경우 쉼표로 구분
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속

transition-timing-function

• transition의 진행 속도(default 값: ease)
• ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )
  -> 자연스러운 가속도로 진행
• linear : cubic-bezier( 0, 0, 1, 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

• transition의 총 시간 (default 값: 0s)
• 시간 단위는 초(s) 또는 1/1000초(ms) 사용
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속

transition-delay

• transition의 시작을 연기
• 시간 단위는 초(s) 또는 1/1000초(ms) 사용
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속