Creative Titel Animation mit HTML und CSS

Wenn man eine neue Hero-Sektion bauen muss, dann braucht man oft eine Titel-Animation.

Heute zeige ich euch, wie ihr eine eher verspielte Titel-Animation mit HTML und CSS erstellen könnt.

Normale und langweilige Titel gibt es zur Genüge, diese Art Titel entlocken einem Kunden aber kein WOW mehr aus dem Mund. Heute muss man schon tiefer in die Trickkiste greifen.

Wie wäre es also, wenn man in so einem Titel alle Buchstaben einzeln animieren könnte?

Ich zeige euch heute, wie das geht und was ihr da alles bauen könnt.

Video

HTML

<div class="container">
      <span class="letter">H</span>
      <span class="letter">A</span>
      <span class="letter">L</span>
      <span class="letter">L</span>
      <span class="letter">O</span>
    </div>

CSS

:root {
  --bg: #000;
  --farbe: #c4b000;
  --rand: #fff;
  --breite: 1px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  font-family: "Chewy", system-ui;
  font-size: 12rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.letter {
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: var(--breite) var(--rand);
  background: repeating-linear-gradient(90deg, var(--bg) 0px, var(--bg) 5px, var(--farbe) 5px, var(--farbe) 10px);
  background-size: 20px 20px;
  background-clip: text;
  -webkit-background-clip: text;

  animation: animationBuchstabe 1000ms linear infinite, bewegung 1500ms ease-in-out infinite;
  will-change: background-position, transform;
}

@keyframes animationBuchstabe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

@keyframes bewegung {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  40% {
    transform: translateX(-6px) translateY(6px);
  }
  50% {
    transform: translateX(6px) translateY(-6px);
  }
}

.letter:nth-child(1) {
  animation-delay: 0ms, 0ms;
}
.letter:nth-child(2) {
  animation-delay: 0ms, 100ms;
}
.letter:nth-child(3) {
  animation-delay: 0ms, 200ms;
}
.letter:nth-child(4) {
  animation-delay: 0ms, 300ms;
}
.letter:nth-child(5) {
  animation-delay: 0ms, 400ms;
}