HTML/CSS로 간단한 Bounce 애니메이션 만들기 튜토리얼
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

어떻게 HTML과 CSS만으로 간단한 반짝임 애니메이션을 만들 수 있는가

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 디자이너 (중간 난이도)

핵심 요약

  • @keyframes를 사용하여 0%, 50%, 100% 단계로 애니메이션 정의
  • ease-inease-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 애니메이션 구현 가능