텍스트 애니메이션: 텍스트에 애니메이션 효과를 적용

텍스트에 애니메이션 효과를 적용하는 것은 웹사이트의 시각적 매력을 높이고 사용자의 주의를 끄는 데 효과적입니다. CSS를 사용하여 다양한 텍스트 애니메이션을 만드는 방법은 다음과 같습니다.

1. 페이드인 효과

• 페이드인 애니메이션: @keyframes를 사용하여 텍스트가 서서히 나타나는 페이드인 효과를 만듭니다.
• 예시:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.text {
  animation: fadeIn 2s ease-in-out;
}

 

2. 슬라이딩 효과

• 슬라이딩 애니메이션: 텍스트가 화면 측면에서 슬라이딩되며 나타나는 효과를 구현합니다.
• 예시:

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.text {
  animation: slideIn 1s ease-out;
}

 

3. 타이핑 효과

• 타이핑 애니메이션: @keyframes와 step() 타이밍 함수를 사용하여 타이핑 효과를 만듭니다.
• 예시:

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
.text {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 4s steps(40, end);
}

 

4. 반짝이는 효과

• 반짝임 애니메이션: @keyframes를 사용하여 텍스트가 반짝이는 효과를 추가합니다.
• 예시:

@keyframes blink {
  50% { opacity: 0; }
}
.text {
  animation: blink 1s linear infinite;
}

 

5. 확대/축소 효과

• 확대 및 축소 애니메이션: scale 변환을 사용하여 텍스트가 확대되거나 축소되는 효과를 만듭니다.
• 예시:

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}
.text {
  animation: zoom 3s ease-in-out infinite alternate;
}

 

6. 회전 효과

• 회전 애니메이션: rotate 변환을 사용하여 텍스트가 회전하는 효과를 구현합니다.
• 예시:

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.text {
  animation: rotate 2s linear infinite;
}

 

7. 텍스트 색상 변경

• 색상 변경 애니메이션: @keyframes를 사용하여 텍스트 색상이 변하는 애니메이션을 적용합니다.
• 예시:

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: green; }
}
.text {
  animation: colorChange 5s ease-in-out infinite;
}

 

8. 텍스트 그림자 효과

• 그림자 애니메이션: text-shadow 속성을 사용하여 텍스트에 동적인 그림자 효과를 추가합니다.
• 예시:

@keyframes shadow {
  from { text-shadow: 0 0 10px red; }
  to { text-shadow: 0 0 20px yellow; }
}
.text {
  animation: shadow 3s infinite;
}

 

9. 텍스트 웨이브 효과

• 웨이브 애니메이션: 여러 span 태그를 사용하여 텍스트에 웨이브 효과를 적용합니다.
• 예시:

.text span {
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
}

 

10. 순차적 텍스트 애니메이션

• 순차적 애니메이션: 여러 텍스트 요소에 순차적으로 애니메이션을 적용합니다.
• 예시:

.text:nth-child(1) { animation-delay: 0.5s; }
.text:nth-child(2) { animation-delay: 1s; }

 

 

11. 텍스트 플로우 효과

• 플로우 애니메이션: translateX 변환을 사용하여 텍스트가 흐르는 듯한 효과를 만듭니다.
• 예시:

@keyframes flow {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
.text {
  animation: flow 10s linear infinite;
}

 

12. 커스텀 텍스트 애니메이션

• 사용자 정의 애니메이션: 복잡한 @keyframes를 사용하여 사용자 정의 텍스트 애니메이션을 만듭니다.