[CSS]Transition
주어진 기간 동안 속성값을 부드럽게 변경할 수 있도록 해줍니다.
예시를 만들 때 영상을 찍어 gif로 만들어서 첨부하면 보시는데 편하시겠지만 시간이 오래 걸리는 관계로 만들지 못했습니다.
Transition 의 프로퍼티 종류
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
transition
transition효과를 주기위해서는 두개의 값이 필요합니다.
- 효과를 주길 원하는 CSS 속성(transition-property)
- 효과의 지속 시간(transition-duration)
참고: 지속시간의 명확하지 않다면 기본값이 0이 되어 trasition 효과가 발생하지 않습니다.
너비 100px, 높이 100px의 빨간색 박스가 있습니다.
이 빨간색 박스에 transition 속성을 주어 효과를 주도록 하겠습니다.
transition 효과는 효과를 주길 원하는 css속성의 값이 변경될 때 발생합니다.
빨간색 박스에 마우스 커서를 올리면(hover) 2s동안 width가 200px에서 300px로 변경됩니다.
빨간색 박스에서 마우스 커서를 빼면 2s동안 width가 300px에서 200px로 변경됩니다.
복수개의 Transition
transition효과는 한번에 여러 개 추가할 수도 있습니다.
transition-timing-function
transition-timing-function 프로퍼티에 나열되는 transition 효과의 속도 곡선입니다.
- ease(기본) : 느림 → 빠름 → 느림
- linear : 쭉 같은 속도
- ease-in : 느린 시작
- ease-out: 느린 끝
- ease-in-out : 시작과 끝을 느리게
- cubic-bezier : 직접 지정
크롬 개발자 도구에서는 위와 같이 보라색 버튼을 클릭해서 두개의 동그란 보라색 공을 당겨가며 속도를 지정할 수 있는 툴을 제공해줍니다.
transition-delay
transition 효과를 지연시킵니다.
transition-delay로 지정한 3초 이후에 transition: width 3s;가 동작합니다.
Transition + Transformation
앞에서 배운 Transform과 같이 사용할 수 있습니다.
Transform이란 요소를 이동, 회전, 크게, 작게, 비트는 변형입니다.
Transition 속성을 한개씩 나열
