transition 사용법

transition 속성 나열 순서

transition : property, duration, timing-function, delay

 

.box { transition: 효과를 적용할 css속성, 완료하는데 걸리는 시간, 속도, 지연시간 ; }

.box { transition: width 0.5s ease-out 0.15s ; }

 

* transition 순서는 이렇게 되지만 반드시 모두 적어야하는건 아니고
아래와 같이 생략하여 써도 무방합니다.
예)  .box { transition:width 0.5s; }
       .box { transition:width 0.5s ease-out; }

* 혹은 css의 모든 속성에 같은 transition을 효과를 줄 경우에는 아래와 같이 할 수 있습니다.
예)  .box { transition:all 0.5s; }

* 여러개의 css 속성을 나열하여 쓸 수도 있습니다.
예) .box { transition: width 0.5s, opacity 0.5s, left 0.3; }

 

1. transition-property
: 효과를 적용할 css 속성
  위에서 언급했듯이 모든 css 속성에 같은 효과를 적용하려면 all을 적어주면 됩니다.
예) .box { transition-property: width; }

2. transition-duration
: 효과가 완료되는데 걸리는 시간
예) .box { transition-duration: 1s; }

3. transition-timing-function
: 효과의 속도를 지정
예) .box { transition-timing-function: linear; }

※ transition-timing-function 속성

linear	동작이 시작할때부터 완료될때까지 시간이 일정함
ease	동작 시작이 천천히 흘러가다 중간에 빠르게 끝에서 천천히 흘러감
ease-in	동작 시작 서서히 흘러가다 중간부터 끝까지 빠르게 변환
ease-out	동작 시작이 빠르게 흘러가다 마지막에 서서히 느려짐
ease-in-out	동작 시작과 끝이 느리게 흘러감
cubic-bezier(n,n,n,n)	베지어 함수로 속도를 조절

4. transition-delay
: 효과를 시작하기 전 지연시간
예) .box { transition-delay: 1s; }

▶transition 속성 예제

박스에 hover 하면 테두리가 그려지는 예제로 transition의 속성을 잘 활용한 것을 보여줄 수 있는
예제입니다.
duration 와 delay 시간에 차이를 두면서 간편하게 효과를 줄 수 있는 방법입니다.