어떻게 HTML과 CSS만으로 간단한 반짝임 애니메이션을 만들 수 있는가
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자 및 디자이너 (중간 난이도)
핵심 요약
@keyframes
를 사용하여 0%, 50%, 100% 단계로 애니메이션 정의ease-in
과ease-out
타이밍 함수로 자연스러운 움직임 구현transform: scale(1.3)
적용으로 애니메이션 효과 강화
섹션별 세부 요약
1. HTML 구조 정의
.bounce
클래스를 가진요소 생성
- 원형 요소로 설정:
width
,height
,border-radius: 50%
적용 position: relative
로 애니메이션 기준 지정
2. CSS 애니메이션 적용
.bounce
클래스에animation: bounce 2s infinite
속성 추가@keyframes bounce
정의:
- 0% 및 100%: top: 0
으로 원위치
- 50%: top: 100px
으로 내려감 (강도 조절 가능)
animation-timing-function
으로 움직임 자연스럽게 조절
3. 애니메이션 효과 강화
transform: scale(1.3)
추가로 요소 확대 효과 구현animation-duration
조정으로 애니메이션 지속 시간 변경 가능
결론
- 애니메이션 강도와 지속 시간을 조정하여 효과 최적화
- JavaScript 없이 순수 CSS로 간단한 UI 애니메이션 구현 가능