728x90
300x250
SMALL
animation효과
- css @keyframes와 animation 속성을 사용하면 반복되거나 시간 기반으로 동작하는 애니메이션을 만들 수 있다.
- transition은 상태 변화에 반응하지만, animation은 자동 반복도 가능하다.
주요 속성
- @keyframes : 애니메이션의 단계 정의
- animation-name : 사용할 키프레임 이름
- animation-duration : 애니메이션 시간
- animation-iteration-count : 반복 횟수
- animation-delay : 시작 지연
- animation-fill-mode : 종료 후 상태 유지
주요 문법
@keyframes animationName {
0% { 속성: 값; }
50% { 속성: 값; }
100% { 속성: 값; }
}
.element {
animation-name: animationName;
animation-duration: 2s; /* 애니메이션 총 시간 */
animation-timing-function: ease; /* 속도 곡선 */
animation-delay: 0s; /* 시작 전 지연 시간 */
animation-iteration-count: infinite; /* 반복 횟수 */
animation-direction: alternate; /* 반복 방향 */
animation-fill-mode: forwards; /* 종료 후 상태 유지 */
}
예제 1: 로딩 스피너
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ccc;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
예제2 : 버튼 깜빡임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
.blinking-btn {
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
</head>
<body>
<button class="blinking-btn">주의!</button>
</body>
</html>
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 다양한 의사 클래스(:focus, :active, :checked) (0) | 2025.05.18 |
|---|---|
| transform으로 요소를 움직이고 회전시키기 (0) | 2025.05.13 |
| transition으로 부드러운 애니메이션 만들기 (0) | 2025.05.12 |
| css 애니메이션 기초 : hover - 버튼, 링크, 카드에 인터랙션 주기 (0) | 2025.05.11 |
| 숫자 변경 애니메이션 -비 (0) | 2025.05.10 |
댓글