transition
Last updated
Was this helpful?
Last updated
Was this helpful?
CSS 속성 변경할 때 애니메이션의 속도를 조절한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 예를 들어, 흰->검 으로 변경시 즉시 일어난다. 하지만 트랜지션 이용시, 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어난다.
어떤 속성을 움직이게 할지
(딜레이를 설정해서) 언제 애니메이션이 시작할지
(지속 시간을 설정해서) 트랜지션을 얼마나 지속할지
(선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행할지
트랜지션은 시작에서 종료까지 어떤 속성의 변화만을 시각화한다. 어떤 변화의 루프를 시각화하려면 속성을 보자.
1 transition-duration 트랜지션 일어나는 지속시간 2 transition-timing-function 속성의 중간값을 계산하는 방법을 정의하는 함수 명시 3 transition-delay 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간 정의
1 CSS 트랜지션 속성은 prefix 제공자 없이 사용 가능
하지만 최근에야 안정되어서.. 벤더 프리픽스 필요하다.
width, height : from 100 to 200
background : #0000FF to #FFCCCC
HTML
CSS
.box { width : 100px; height : 100px; background-color : #0000FF; -webkit-transition: width 2s, height 2s, background-color 2s, -webikit-transform 2s; transition:width 2s, height 2s, background-color 2s, transform 2s
}
See the Pen by cooking () on .
