css transition

CSS

rienna 2019. 7. 5. 11:30

Transition - 화면 이동을 위한 점진적 효과

transform (변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다. transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동"..

webclub.tistory.com

CSS 트랜지션(Transition): IE 10+

transition-property : 화면 이동에 영향을 받는 속성으로 이 값을 지정하면 특정 사항에 대해서만 화면 이동 효과가 나타난다.(어떤 속성을 트랜지션 할 것인지)
transition-duration : CSS 효과가 반영되는데 걸리는 시간, 즉 화면 이동이 종료되기 까지 걸리는 시간(트랜지션이 일어나는 지속시간)
transition-timing-function : 타이밍 함수(어떤 움직임(시간에 따른 가속이나 감속)으로 반영할 것인지)
transition-delay : 트랜지션 지연시간(애니메이션을 지연시킬 때)
transition : 트랜지션 속기형(위의 속성들을 한데 모아서 작성할 때)