[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-03 | CSS Transition

1. transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

  - 사용 방법: transition: 속성명 지속시간 타이밍 함수 대기 시간; 순

  -  transition: transition-property, transition-duration, transition-timing-function, transition-delay

2.transition-property: 전환 효과를 사용할 속성 이름 지정

  - transition-property: all - 모든 속성에 적용

  - transition-property: 속성이름 - 전환 효과를 사용할 속성 이름 명시

3.transition-duration: 전환 효과의 지속시간을 지정

  - transition-duration: 0s - 전환 효과 없음

  - transition-duration: 시간 - 지속 시간(s)을 지정

4.transition-timing-function: 전환 효과의 타이밍(easing) 함수를 지정

  - transition-timing-function: ease - 느리게 - 빠르게 - 느리게

  - transition-timing-function: linear - 일정하게

  - transition-timing-function: ease-in - 느리게 - 빠르게

  - transition-timing-function: ease-out - 빠르게 - 느리게

  - transition-timing-function: ease-in-out  - 느리게 - 빠르게 - 느리게

  - (transition-timing-function: cubic-beizer(n,n,n,n)- 자신만의 값을 정의(0~1))

  - (transition-timing-function: steps(n) - n번 분할된 애니메이션)

5.transition-delay: 전환 효과 대기 시간 지정

  - transition-delay: 0s- 대기 시간 없음

  - transition-delay: 시간 - 대기 시간(s)를 시정