고급 CSS 스타일링: 애니메이션과 트랜지션 심화
이 강의에서는 웹 페이지에 생동감을 불어넣는 CSS 애니메이션과 트랜지션의 고급 기술을 배워보겠습니다. 사용자 인터페이스를 더욱 매력적이고 직관적으로 만들 수 있는 다양한 방법을 탐구합니다.
CSS 트랜지션
트랜지션을 사용하여 HTML 요소의 속성 변화를 시간에 따라 부드럽게 표현할 수 있습니다. 트랜지션은 사용자의 상호작용에 따른 시각적 피드백을 제공하는 데 매우 유용합니다.
트랜지션 예제: 버튼 호버 효과
.button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s;
}
.button:hover {
background-color: #3e8e41;
transform: scale(1.1);
}이 코드는 버튼에 마우스를 올렸을 때 배경 색상이 변경되고, 버튼이 약간 확대되는 효과를 만듭니다. transition 속성은 변화가 적용될 CSS 속성과 지속 시간, 타이밍 함수를 지정하여 애니메이션을 부드럽게 만듭니다.
CSS 애니메이션
CSS 애니메이션은 키프레임을 사용하여 복잡한 애니메이션을 생성할 수 있습니다. 이를 통해 요소가 시간에 따라 여러 단계를 거쳐 변화하는 복잡한 효과를 구현할 수 있습니다.
애니메이션 예제: 로딩 스피너
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}이 CSS 코드는 원형 로딩 스피너를 만듭니다. @keyframes를 사용하여 스피너가 무한히 회전하는 애니메이션을 정의하고 있습니다. animation 속성은 애니메이션의 이름, 지속 시간, 타이밍 함수, 반복 횟수를 지정합니다.
실습: 사용자 피드백 애니메이션 구현
강의에서는 실습을 통해 사용자 입력에 반응하는 동적인 요소를 만드는 방법을 배웁니다. 예를 들어, 폼 제출 버튼을 클릭했을 때 성공 메시지가 페이드인 되는 애니메이션을 추가할 수 있습니다.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.success-message {
display: none;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
/* JavaScript로 클래스를 토글하여 메시지를 표시하거나 숨깁니다. */결론
CSS 애니메이션과 트랜지션은 웹사이트의 상호작용을 풍부하게 하고 사용자 경험을 향상시킬 수 있는 강력한 도구입니다. 이 강의를 통해 다양한 애니메이션 기술을 배우고 실제 웹 프로젝트에 적용할 수 있는 능력을 키울 수 있습니다.
댓글