스크립트 없이 CSS만으로 반짝이는 글자 애니메이션 만들기

 

 

안녕하세요 😊
웹에서 텍스트를 강조할 때 흔히 자바스크립트를 이용해 애니메이션을 넣곤 합니다.
하지만 요즘은 CSS만으로도 충분히 세련된 애니메이션 효과를 줄 수 있습니다.

오늘은 초보자도 따라 할 수 있는 반짝이는 글자 애니메이션을 만들어 보겠습니다.

---

📍 1. 기본 아이디어

반짝이는 효과를 주기 위해서는 크게 두 가지 기법을 사용할 수 있습니다.

1. linear-gradient + background-clip:text → 빛이 지나가는 효과
2. text-shadow 애니메이션 → 글자 주위가 번쩍이는 효과

이 두 가지를 조합하면 다양한 스타일의 반짝임을 표현할 수 있습니다.

---

📍 2. 빛이 스쳐 지나가는 반짝임

 

<h1 class="shine">Shiny Text</h1>

.shine {
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #fff, #ffd700, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to {
    background-position: -200% center;
  }
}

 

👉 결과: 글자 안을 황금빛 빛줄기가 주기적으로 지나가는 효과를 냅니다.

---

📍 3. 텍스트 네온(발광) 효과

 

<h1 class="neon">Neon Glow</h1>

 

.neon {
  font-size: 3rem;
  color: #39ff14;
  text-shadow: 0 0 5px #39ff14,
               0 0 10px #39ff14,
               0 0 20px #39ff14,
               0 0 40px #39ff14;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

 

👉 결과: 초록색 네온사인 같은 깜빡이는 반짝임이 구현됩니다.

---

📍 4. 별빛 반짝임 효과 (text-shadow 점멸)

 

<h1 class="sparkle">Sparkle</h1>

 

.sparkle {
  font-size: 3rem;
  color: #fff;
  text-shadow: 0 0 5px #fff,
               0 0 10px #87cefa,
               0 0 20px #00f;
  animation: sparkle 1s infinite alternate;
}

@keyframes sparkle {
  from { text-shadow: 0 0 5px #fff, 0 0 10px #87cefa, 0 0 20px #00f; }
  to   { text-shadow: 0 0 15px #fff, 0 0 30px #87cefa, 0 0 50px #00f; }
}

 

👉 결과: 별빛이 반짝이는 듯한 부드러운 발광 효과가 만들어집니다.

---

📍 5. 실무 활용 팁

• 너무 과한 애니메이션은 UX에 방해가 될 수 있습니다.
  → 로고, 배너 문구 등 포인트가 필요한 부분에만 활용하세요.
• 접근성을 위해 중요한 텍스트는 색 대비를 유지하세요.
  → 애니메이션이 꺼진 상태에서도 읽을 수 있어야 합니다.
• 모션 최소화 환경(prefers-reduced-motion)을 고려하면 좋습니다.

 

@media (prefers-reduced-motion: reduce) {
  .shine, .neon, .sparkle {
    animation: none;
  }
}

---

✅ 마무리

CSS만으로도 충분히 멋진 반짝이는 글자 애니메이션을 만들 수 있습니다.
linear-gradient와 text-shadow만 알면 자바스크립트가 없어도 다양한 효과를 구현할 수 있으니,
작은 포인트를 주고 싶을 때 꼭 활용해 보시길 추천드립니다. ✨