CSS - 문제 미리보기
문제 1426
medium
애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지하려면 어떤 속성을 사용해야 하나요?
정답: B
forwards:
• 애니메이션 종료 후 마지막 키프레임 스타일 유지
• 가장 많이 사용되는 값
backwards:
• 애니메이션 시작 전(delay 동안) 첫 번째 키프레임 스타일 적용
both:
• forwards + backwards 효과를 모두 적용
none (기본값):
• 애니메이션 전후에 키프레임 스타일을 적용하지 않음
• 실제 사용 예시:
```css
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease forwards; /* 슬라이드 후 제자리 유지 */
}
```
• 애니메이션 종료 후 마지막 키프레임 스타일 유지
• 가장 많이 사용되는 값
backwards:
• 애니메이션 시작 전(delay 동안) 첫 번째 키프레임 스타일 적용
both:
• forwards + backwards 효과를 모두 적용
none (기본값):
• 애니메이션 전후에 키프레임 스타일을 적용하지 않음
• 실제 사용 예시:
```css
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease forwards; /* 슬라이드 후 제자리 유지 */
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.