Css의 속성의 변형이 있다면 그 변형의 중간 과정을 자연스럽게 만들어주는 애니메이션을 구현할 수 있는 속성 중 한 가지인 Transition에 대해 알아보겠습니다.
다른 하나는 animation 입니다.
Transition
Transform에 국한된 효과가 아닌 CSS의 모든 속성에 적용이 가능하며 이벤트 트리거에의해 CSS 변형이 발생한 모든 속성의 변형 전과 변형 후의 중간 과정을 만들어서 애니메이션이 되도록 도와줍니다.
❗️주의사항
Transition은 CSS 속성이 px,%,rgb(0,0,0) 등 숫자로 표현 되어있는 요소에만 적용됩니다. width : auto 와 같이 숫자가 아닌 값으로 설정된 속성은 적용이 되지 않습니다.
사용방법
Transition은 기본상태, 변경후의 상태가 있어야만 중간 과정을 만들어주며 CSS 에서 기본적으로 제공해주는 동작 관련 가상 클래스를 활용하여 효과를 줄 수 있고, 또한 Javascript를 활용하여 DOM을 조작하고 동적으로 클래스를 부여할때도 사용할 수 있습니다.
동작관련 가상클래스
:hover: 요소에 마우스 커서를 올렸을 때.
:active: 요소가 활성화되었을 때 (보통 클릭되었을 때).
:focus: 요소가 포커스를 받을 때 (예: 입력 필드 클릭).
:focus-within: 요소나 자식 요소가 포커스를 받을 때.
:focus-visible: 요소가 키보드로 포커스를 받을 때.
상태관련 가상클래스
:checked: 입력 요소(checkbox, radio button)가 체크되었을 때.
:disabled: 요소가 비활성화되었을 때.
:enabled: 요소가 활성화되었을 때.
:required: 입력 요소가 필수일 때.
:optional: 입력 요소가 필수가 아닐 때.
:valid: 입력 요소의 값이 유효할 때.
:invalid: 입력 요소의 값이 유효하지 않을 때.
:in-range: 입력 요소의 값이 범위 내에 있을 때.
:out-of-range: 입력 요소의 값이 범위 밖에 있을 때.
:placeholder-shown: 입력 요소의 placeholder가 표시될 때.
:read-only: 요소가 읽기 전용일 때.
:read-write: 요소가 읽기/쓰기 가능할 때.
Transition 속성 작성 방법
transition : property, duration, timing-function,delay
/* width 속성*/
transition : width, 1s, ease-in-out, 1s- property : transition 을 적용할 속성을 선택합니다.
- duration : 애니메이션이 진행되는 시간을 설정합니다.
- timing-function : 애니메이션의 가속도를 설정합니다.
- delay : 애니메이션의 진행 시작까지 지연할 시간을 설정합니다.
.box {
width: auto;
height: 200px;
border : 1px solid black
background-color : red;
transition : all 1s /* 함축적 표현으로 1초동안 모든 속성에 애니메이션을 부여 합니다. */
}
.box:hover {
width: 500px /* auto 로 설정되어 애니메이션이 적용되지 않습니다.*/
height: 400px;
background-color : blue;
}알아두면 좋은것
크롬 개발자도구에 transition 이 적용된 요소를 클릭하면 트랜지션의 동작을 나타내는 그래프가 보입니다. 저 그래프를 마우스로 조작하여 원하는 동작을 편하게 만들어 낼 수 있습니다. 단, transition 속성에 cubic-bezier() 속성이 있을때만 나타나니 대충 아무거나 넣어놓고 개발자도구로 확인하면 재밌는 이징커브를 만들 수 있습니다!
