[CSS] transition, 가상 선택자

📌 참고 사이트

transition - CSS: Cascading Style Sheets | MDN (mozilla.org)

transition - CSS: Cascading Style Sheets | MDN

 

CSS 가상 클래스 선택자 - ofcourse

CSS 가상 클래스 선택자 - ofcourse

 

📋 transition

transition 속성은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.

transition은 transition-property, transition-duration, transition-timing-function, transition-delay를 위한 단축 속성이다.

 

 

📍 transition-property

효과를 적용하고자 하는 css 속성의 값을 적어주면 된다.

예를 들면, 요소의 너비에 변화를 주고 싶다면 width를 값으로, 요소의 배경색에 변화를 주고 싶다면 background-color를 값으로 적어주면 된다.

 

 

📍 transition-duration

해당 애니메이션 효과가 얼마 동안 지속되게 할 것인지 시간을 적어주면 된다.

 

 

📍 transition-timing-function

애니메이션 효과의 속도 곡선에 대한 값을 적어주면 된다.

 

➡️ linear : 균일한 속도로 애니메이션이 진행된다.

➡️ ease: 애니메이션 중간으로 갈수록 속도가 증가하고, 끝에서 다시 느려진다.

➡️ ease-in : 천천히 시작하여 애니메이션이 종료될 때까지 속도가 점점 증가한다.

➡️ ease-out : 빠르게 시작하여 애니메이션이 종료될 때까지 속도가 점점 감소한다.

➡️ ease-in-out : 천천히 시작하여 속도를 높인 뒤 다시 속도를 낮춘다.

➡️ steps(n, <jumpterm>) : 전환을 따라 n개의 정지점을 따라 전환을 표시하고, 동일한 시간 동안 각 정지점을 표시한다. (n이 5이면 5개의 단계가 있고, 5개의 정지를 만들게 된다.)

 

위의 값 이외에도 다양한 값들이 적용될 수 있다.

 

 

📍 transition-delay

특정 시간 조건 하에서 애니메이션 효과가 발동될 수 있게 하는 속성으로, 만약 1s를 적어준다면 1초 후에 효과가 발동되게 된다.

즉, 애니메이션 시작 시간을 지연시키고 싶을 때 사용하는 속성이다.

 

 

❗ transition에서 위 항목들의 순서는 중요하다.

시간으로 해석 가능한 값이 첫 번째에 위치한다면 transition-duration으로 해석되고, 두번째에 위치한다면 transition-delay로 해석된다. 

따라서 시간 값을 적어줄 때는 이를 유념해야 한다.

 

 

 

📋 가상 선택자

CSS에서 선택자 뒤에 :가상 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 선택 가능하다.

다음과 같은 종류가 있다.

 

➡️ :link -> 방문한 적이 없는 링크

➡️ :visited -> 방문한 적이 있는 링크

➡️ :hover -> 마우스를 롤오버 하였을 때 (요소의 범위에 마우스를 올렸을 때)

➡️ :active -> 마우스를 클릭했을 때

➡️ :focus -> 포커스 되었을 때 (input 태그 등이)

➡️ :first -> 첫번째 요소

➡️ :last -> 마지막 요소

➡️ :first-child -> 첫번째 자식 요소

➡️ :last-child -> 마지막 자식 요소

➡️ :nth-child(2n+1) -> 홀수 번째 자식 요소

 

등등 많은 가상 선택자가 있다.

 

💻 transition과 가상 선택자 hover 예시

 

See the Pen Untitled by YuBeen So (@kanujoa) on CodePen.

 

마우스를 .transition에 올리면(hover) 1초 후(delay)에 width(property) 값이 500px로, 2초 동안(duration), 속도는 천천히 시작하였다가 빨라졌다가 다시 천천히(timing-function) 변하는 애니메이션 효과가 발동된다.

마우스를 떼면 같은 방식으로 원래대로 돌아오게 된다.