Transition & Animation

DocsArchives

2025.09.07 19:29

css

727

부드러운 인터랙션 만들기

웹사이트는 단순히 정적인 화면이 아니라, 사용자와의 상호작용을 통해 더 매력적으로 보일 수 있습니다. 이를 가능하게 해주는 것이 transition과 animation입니다.

Transition 예시

.button {  background: #3498db;  transition: background 0.3s ease;}.button:hover {  background: #2ecc71;}

버튼에 마우스를 올렸을 때 색이 부드럽게 변합니다.

@keyframes fadeIn {  from { opacity: 0; }  to { opacity: 1; }}.box {  animation: fadeIn 1s ease-in-out;}

페이지 로딩 시 박스가 자연스럽게 나타납니다.

애니메이션은 과하면 산만하지만, 적절히 사용하면 사용자 경험을 크게 향상시킵니다. 버튼 hover, 페이지 전환, 로딩 애니메이션 등에 적극 활용해 보세요.