[프론트엔드] 10. 전환

이하나·2022년 2월 24일
0

프론트엔드

목록 보기
13/19

[ 1 ] transition

transition: 속성명 지속시간 타이밍함수 대기시간;
: 요소의 전환효과를 지정하는 단축 속성
: transition-duration = 지속시간 = 필수 속성

1) transition-property

: 전환 효과를 사용할 속성 이름

  • 기본값
    • all : 모든 속성에 전환효과를 적용
  • 설정값
    • 속성이름 : 지정된 속성에만 전환효과를 적용

2) transition-duration

: 전환 효과의 지속시간

  • 기본값
    • 0s : 전환 효과 없음
  • 설정값
    • 시간 : 지정된 시간동안 전환효과를 적용

3) transition-timing-function

: 전환효과의 타이밍 함수 지정

  • 기본값
    • ease : 느리게 - 빠르게 - 느리게
      :: cubic-bezier(0.25, 0.1, 0.25, 0.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)
    • cubic-bezier(n, n, n, n) : 커스텀 (n = 0 ~ 1)
    • steps(n) : n번 분할된 애니메이션

      참고 사이트

      (1) 타이밍 함수 시트 - 사용가능한 타이밍 함수의 종류와 함수의 시각적 이해
      (2) 타이밍 함수 mdn - 타이밍 함수와 cubic bezier curve에 대한 설명 사용가능한 키워드

4) transition-delay

: 전환 효과에 대기시간을 부여

  • 기본값
    • 0s : 전환 효과 없음
  • 설정값
    • 시간 : 지정된 시간 이후 전환효과를 적용
profile
코딩을 배우는 비전공자 코린이!

0개의 댓글