catbook C:haevivin Front-end Developer

14. CSS transitions

» CSS

Transitions (전환)

  • 전환 효과를 지정
  • 바뀌기 전 요소에 transition 속성 작성
  • 사용법
    • transition: 속성이름 지속시간 [타이밍함수 대기시간];
div {
    transition: width 1s, background 1s;
}


transition-property

  • 전환 효과를 사용할 속성 이름을 설정
  • 속성 값
    • all : 모든 속성에 적용
    • 속성 이름 : 전환 효과를 적용할 속성 이름


transition-duration

  • 전환 효과의 지속시간을 설정
  • 속성 값
    • 시간 : 전환 효과가 지속되는 시간


transition-timing-function

  • 타이밍 함수 (애니메이션 전환 효과) 지정
  • 속성 값
    • ease : 빠르게-느리게
    • linear : 일정하게
    • ease-in : 느리게-빠르게
    • ease-out : 빠르게-느리게
    • ease-in-out : 느리게-빠르게-느리게
    • cubic-bezier(n, n, n, n) : 값 지정 (0 ~ 1)
    • steps(n) : n번 분할된 애니메이션


transition-delay

  • 전환 효과가 몇 초 뒤에 시작할 지 대기시간 지정
  • 속성 값
    • 시간 : 전환 효과의 대기시간을 설정


See the Pen css_transitions by chaevivin (@chaevivin) on CodePen.