🙈 CSS 애니메이션, transition 속성 분리 누락: 예기치 못한 애니메이션 동작, 요약: transition 속성은 단축 속성이므로, 속성값을 분리하여 작성하지 않으면 예상치 못한 애니메이션 동작이 발생할 수 있습니다. 변경하려는 속성을 명시적으로 선언하여 의도대로 애니메이션을 제어해야 합니다.

CSS transition 속성은 단축 속성으로, transition: all 0.3s;처럼 사용하면 모든 속성에 0.3초 동안 transition이 적용됩니다. 이는 개발자가 의도하지 않은 속성 변화에 대해서도 애니메이션이 발생하게 만들어 예기치 않은 시각적 문제를 야기할 수 있습니다. 예를 들어, hover 시 배경색과 글자색이 동시에 변하는 경우, 글자색 transition 효과가 의도치 않게 나타날 수 있습니다. 또한, 브라우저는 모든 속성을 감시해야 하므로 성능에도 미미하게 영향을 줄 수 있습니다. 특히 복잡한 컴포넌트에서 이런 현상이 누적되면 UI 성능 저하로 이어질 수 있습니다.

애니메이션 효과를 적용하려는 특정 CSS 속성을 명시적으로 지정해야 합니다. 예를 들어 배경색 변화에만 애니메이션을 적용하려면 transition: background-color 0.3s; 와 같이 작성합니다. 이렇게 하면 다른 속성 변화에 불필요한 애니메이션 효과가 적용되는 것을 방지하고, 코드의 의도를 명확하게 드러낼 수 있습니다. 또한, will-change 속성을 사용하여 변경될 속성을 미리 브라우저에 알려주면 성능 최적화에 도움이 될 수 있습니다.