Transitions(전환)

css 속성의 시작과 끝을 지정(전환 효과)

 

property : 속성이름

duration : 지속기간

timing-function : 타이밍 함수 지정

delay : 대기시간

 

** transition은 바뀌기 전 상태에 입력

 

.box { width:100px;

        height:100px;

        background:tomato;

        margin:300px;

        transition: width 1s linear, background 1s linear;

}

.box:hover {

        width:300px;

        background:dodgerblue;

}

 

 

timing-function 종류

ease(기본속성) : 빠르게 느리게

linear :일정하게

ease-in : 느리게 빠르게

ease-out : 빠르게 느리게

ease-in-out : 느리게 빠르게 느리게

cubic-bezier(n,n,n,n) : 직접설정(0~1) (n은 시간)

step(n) : n번 분할된 애니메이션 (n은 횟수)

 

 

easing function 치트 시트 참고

https://easings.net/ko