Programming > CSS

[css] transition (변화되는 시간의 흐름을 설정)

transition 시간당 변화의 흐름을 제어

transition

transition: width 2s, height 2s, transform 2s;
과 같이 여러 효과를 각각지정
transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다.
transition: property timing-function duration delay | initial | inherit

transition-delay

지연시간을 설정: 설정이후 시작
    

transition-duration

지속되는 시간을 설정
    

transition-property

요소에 추가할 전환(transition) 효과를 설정함.
transition-property: none | all | property | initial | inherit
    none(적용안함), all(모든속성적용), property(적용대상 지정)
        

transition-timing-function (시간당 속도)
설정값 내용
linear 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
ease 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
ease-in 전환(transition) 효과가 천천히 시작됩니다.
ease-out 전환(transition) 효과가 천천히 끝납니다.
ease-in-out 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
cubic-bezier(n,n,n,n) 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
step-start steps(1, start)와 동일 시작과 동시에 효과 한번에 완료
step-end steps(1, end)와 동일 종료와 동시에 효과 한번에 완료
steps(n, start|end) n단계로 나누어 끊어서 완료 start/end가 없으면 end

 

 

 

 

 

[css] transform ( 이동, 회전, 확대/축소, 비틀기 ) ❮
❯ [css] animation