Transition(전환) 개요 HTML CSS

HTML/CSS의 transition 속성은 요소의 속성 값을 변경할 때 애니메이션 효과를 추가할 수 있습니다. transition 속성은 다음과 같은 속성을 가집니다.

 

• property: 애니메이션이 적용될 속성의 이름을 지정합니다.
• duration: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다. 단위는 ms(밀리초)입니다.
• timing-function: 애니메이션의 속도를 지정합니다. linear, ease-in, ease-out, ease-in-out 등이 있습니다.
• delay: 애니메이션이 시작되기 전에 지연되는 시간을 지정합니다. 단위는 ms(밀리초)입니다.

transition 속성의 사용 예

 

다음 CSS는 요소의 너비를 100px에서 200px로 변경할 때 애니메이션 효과를 추가합니다.

 

div {
  width: 100px;
  transition: width 2s ease-in-out;
}

div:hover {
  width: 200px;
}

 

 

<div>
  <p>이 요소는 마우스 오버하면 너비가 100px에서 200px로 변경됩니다.</p>
</div>

transition 속성의 활용

 

transition 속성은 다음과 같은 다양한 효과를 만들 수 있습니다.

• 요소의 크기를 변경하는 애니메이션
• 요소의 위치를 변경하는 애니메이션
• 요소의 색상을 변경하는 애니메이션
• 요소의 배경색을 변경하는 애니메이션
• 요소의 투명도를 변경하는 애니메이션

transition 속성의 한계

 

transition 속성은 다음과 같은 한계가 있습니다.

• 애니메이션 효과는 요소의 속성 값을 변경하는 경우에만 적용됩니다.
• 애니메이션 효과는 요소의 크기, 위치, 색상, 배경색, 투명도 등과 같은 기본 속성에만 적용됩니다.
• 애니메이션 효과는 사용자가 요소를 스크롤하거나 확대/축소할 때 중단될 수 있습니다.

transition 속성의 대안

 

transition 속성의 한계를 보완하기 위해 다음과 같은 대안을 사용할 수 있습니다.

• CSS animation 속성: transition 속성과 달리 애니메이션 효과는 요소의 속성 값을 변경하는 경우뿐만 아니라 요소의 모양을 변경하는 경우에도 적용됩니다. 또한, 애니메이션 효과는 사용자가 요소를 스크롤하거나 확대/축소할 때 중단되지 않습니다.
• JavaScript: JavaScript를 사용하여 요소의 속성 값을 변경하는 애니메이션을 만들 수 있습니다. JavaScript를 사용하면 사용자의 스크롤이나 확대/축소에 따라 애니메이션 효과를 조정할 수 있습니다.