Wie man es „wie bei Tinkoff/Yandex“ macht: Animationen und Mikrointeraktionen, die die App sofort „teuer“ machen

Ist Ihnen aufgefallen, wie angenehm die Apps von Tinkoff, Yandex oder Alfa-Bank zu bedienen sind? Die Tasten reagieren auf das Drücken, die Elemente erscheinen reibungslos, die Downloads ärgern nicht, sondern im Gegenteil - erfreuen das Auge. Das ist keine Magie und auch keine Armee von Designern. Es handelt sich um eine Reihe spezifischer Techniken, die Sie ebenfalls erlernen können.

Warum ist das überhaupt wichtig?

Der Benutzer wird nicht sagen: "Wow, es gibt einen Übergang mit Cubic-Bezier!". Aber er wird sagen: "Was für eine schöne App" oder "Sieht irgendwie billig aus." Hochwertige Animationen wirken auf einer unbewussten Ebene:

• Schaffen ein Gefühl von Geschwindigkeit - auch wenn der Server langsam ist

• Feedback geben - Der Benutzer versteht, dass seine Aktion berücksichtigt wurde

• Reduzieren die kognitive Belastung — fließende Übergänge helfen dem Gehirn zu verstehen, was passiert

• Vertrauenswürdig — Details zeigen, dass das Team sich um das Produkt kümmert

1. Skelette statt Spinner

Was ist los mit den Spinnern?

Ein sich drehender Kreis gibt keine Informationen. Der Benutzer weiß nicht, wie lange er warten muss und was überhaupt geladen wird.

Was Tinkoff tut:

Sie zeigen den "Ghost" zukünftiger Inhalte - graue Blöcke anstelle von Text, Bildern, Schaltflächen. Dies wird als Skelettbildschirm oder Skeleton bezeichnet.

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

Warum das funktioniert:

Das Gehirn nimmt das Skelett als „Inhalt ist fast geladen“ wahr und nicht als „wer weiß, wie lange man noch warten muss“. Laut Studien schätzen Benutzer die Ladezeit mit Skeletons um 30-40% schneller ein als mit Spinnern.

2. Taktile Reaktion auf Aktionen

Effekt beim Drücken der Taste:

Wenn Sie in der Yandex-App auf eine Schaltfläche tippen, "versinkt" sie ein wenig. Dies imitiert eine physische Taste.

.button {
  background: #ffdd2d;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Ripple-Effekt (Welle):

Wenn Sie auf den Punkt klicken, breitet sich eine Welle aus. Dies ist ein Feature von Material Design, aber es wird von allen verwendet.

function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement('span');
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
  circle.classList.add('ripple');

  const ripple = button.getElementsByClassName('ripple')[0];
  if (ripple) {
    ripple.remove();
  }

  button.appendChild(circle);
}

3. Intelligente Übergänge zwischen Zuständen

Schlecht:

Inhalte verschwinden einfach und tauchen wieder auf. Schnell. Billig.

Gut:

Wir verwenden sanfte Übergänge mit transform und opacity.

.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}

Goldene Regel: Jede Änderung des DOM muss animiert werden. Kein plötzliches Erscheinen/Verschwinden.

4. Mikroanimationen von Formen

Bei Fokus auf Eingabe:

.input {
  border: 2px solid #e0e0e0;
  padding: 12px;
  width: 100%;
  transition: all 0.2s ease;
  outline: none;
}

.input:focus {
  border-color: #ffdd2d;
  box-shadow: 0 0 0 4px rgba(255, 221, 45, 0.1);
}

.input-label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #999;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.input:focus + .input-label,
.input:not(:placeholder-shown) + .input-label {
  top: -8px;
  left: 8px;
  font-size: 12px;
  background: white;
  padding: 0 4px;
  color: #ffdd2d;
}

Validierung mit Animation:

.input-error {
  border-color: #ff3333;
  animation: shake 0.4s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

5. Fortschrittsbalken, die nicht ärgern

Schlechter Fortschrittsbalken: bewegt sich einfach. Langweilig.

Guter Fortschrittsbalken: glatt, mit einem leichten Leuchten, zeigt bestimmte Phasen.

.progress-bar {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffdd2d, #ffc700);
  border-radius: 10px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 0 10px rgba(255, 221, 45, 0.5);
}

6. Modale Fenster mit Smart Appearance

Falsch: ein Fenster erscheint einfach.

Richtig: Der Hintergrund wird dunkler, das Fenster erscheint mit leichtem Zoomen und Bewegung von unten nach oben.

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}

.modal-overlay.active {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: all;
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

7. Karten mit Hover-Effekten

Karten von Waren, Beiträgen, Projekten - sie sollten auf den Mauszeiger reagieren:

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card img {
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.05);
}

8. Ladeanzeigen für Aktionen

Wenn der Benutzer auf "Senden" klickt, sollte die Schaltfläche anzeigen, dass der Vorgang ausgeführt wird:

.submit-button {
  position: relative;
  min-width: 120px;
  transition: all 0.3s ease;
}

.submit-button.loading {
  pointer-events: none;
}

.spinner {
  width: 20px;
  height: 20px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

9. Toasts und Benachrichtigungen

Grundsätze:

• Erscheinen seitlich (oben rechts oder links)

• Sanftes Einfahren

• Verschwindet automatisch nach 3-5 Sekunden

• Kann manuell geschlossen werden

.toast {
  position: fixed;
  top: 20px;
  right: -300px;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.show {
  right: 20px;
}

10. Wichtige Animationsprinzipien

Timing-Funktionen:

Verwenden Sie nicht einfach ease oder linear. Lernen Sie cubic-bezier:

• ease-in-out - Beschleunigt und verlangsamt sich sanft

• cubic-bezier(0.4, 0, 0.2, 1) - Material Design Easing, sehr angenehm

• cubic-bezier(0.25, 0.46, 0.45, 0.94) — easeOutQuad für schnelle Animationen

Dauer:

• Mikrointeraktionen (hover, Klicks): 100-200ms

• Übergänge zwischen Zuständen: 200-300ms

• Modale Fenster, Schubladen: 300-400ms

• Seitenanimationen: 400-600ms

Mehr als 600 ms ist bereits zu langsam.

60-FPS-Regel:

Animieren Sie nur Eigenschaften, die keinen Reflow verursachen:

• ✅ transform, opacity

• ❌ width, height, top, left, margin

Befund

Bei hochwertigen Animationen geht es nicht um Komplexität, sondern um Details. Sie müssen weder 3D noch Physik lernen. Sie müssen nur:

1. Alles geschmeidig machen

2. Feedback zu Aktionen geben

3. Verwenden Sie die richtigen Timing-Funktionen

4. Seien Sie konsistent

Beginnen Sie mit einer Schaltfläche. Machen Sie sie angenehm. Dann noch eine. Dann die Formulare. Dann die Karten. In einem Monat wird Ihre App fantastisch aussehen.

All dies und vieles mehr kann in Kodike – ausführlich, mit praktischen Aufgaben und realen Beispielen. Wir analysieren nicht nur die Theorie, sondern zeigen auch, wie das alles in realen Projekten funktioniert.

Und wenn Sie Unterstützung oder Fragen haben oder den Code besprechen möchten, haben wir eine riesige aktive Community in Telegram-Kanal! Mehr als 2000 Entwickler, die immer helfen, beraten und unterstützen.

👉 Jetzt bei Kodik lernen 🔥 Bei Telegram beitreten