transition 속성값

정해진 시간동안 요소에 속성값을 부드럽게 부드럽게 변화시키는 속성

 

transition 적용할 수 있는 속성

위치 - top, left, right, bottom

크기 - widht, height

박스속성 - margin, padding

테두리 속성 - border-width, border-radius, border-color

색상 - color, background-color

투명도 - opacity

변환속성 - transform

 

transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정

trainsition-duration : 이벤트를 몇 초동안 진행할지 지정

transition-property : 어떤 속성을 변형할지 지정

transition-timing-function : 수치 변형 함수 지정 - 가속도

    linear: 처음부터 끝까지 일정한 속도

    ease: 천천히 시작되어 빨라지다가 마지막에 다시 느려짐

    ease-in: 전환효과가 천천히 시작

    ease-out: 전환효과가 천천히 끝남

    ease-in-out: 전환효과가 천천히 시작해서 천천히 끝남

    cubic-bezier()

 

transition: property duration timing-function delay 순으로 작성