Schalte CSS-Übergänge und -Animationen an einzelnen Elementen ab oder füge kleine, vordefinierte Animationen hinzu.

Viele Bootstrap-Komponenten bewegen sich per CSS-Transition oder -Animation. Mit den Motion-Utilities nimmst du diese Bewegung gezielt an einem Element heraus oder setzt eine kurze Animation ein. Global schaltest du Übergänge beim Build mit der Sass-Option $enable-transitions: false ab.

• .transition-none – Änderungen ohne Übergang.
• .animation-none – stoppt Keyframe-Animationen.
• .animation-shake – kurzes Schütteln, z. B. bei Fehlern.
• .animation-pop – Einblenden mit leichtem Überschwingen.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Transition

.transition-none setzt transition: none, sodass Eigenschaftsänderungen sofort greifen statt animiert zu werden. Fahr über beide Buttons: Der erste wechselt die Farbe weich, der zweite springt sofort um.

<button type="button" class="btn-solid theme-primary">Standard</button>
<button type="button" class="btn-solid theme-primary transition-none">Ohne Hover-Übergang</button>

Animation

Animation abschalten

.animation-none setzt animation: none und stoppt jede laufende Keyframe-Animation an diesem Element, etwa die eines Spinners.

<div class="spinner-border" role="status">
    <span class="visually-hidden">Wird geladen …</span>
  </div>
  <div class="spinner-border animation-none" role="status">
    <span class="visually-hidden">Wird geladen …</span>
  </div>

Shake

.animation-shake spielt einmalig ein kurzes horizontales Schütteln ab. Das passt gut zu ungültigen Formulareingaben: Setze die Klasse an das Feld – oder schalte sie per JavaScript um, wenn die Validierung fehlschlägt –, um auf den Fehler aufmerksam zu machen. Die Animation läuft beim Laden der Seite einmal ab.

<input type="text" class="form-control is-invalid animation-shake" id="motionShakeDemo" value="Nicht ganz richtig" aria-label="Beispielfeld mit Fehler">

Pop

.animation-pop skaliert ein Element mit leichtem Überschwingen herein. Ideal für dynamisch erscheinende Inhalte, z. B. ein Badge, dessen Zähler sich gerade geändert hat.

<span class="badge theme-primary animation-pop" id="motionPopDemo">Neu</span>

Reduzierte Bewegung

.transition-none und .animation-none wirken immer, unabhängig von der Bewegungseinstellung der Nutzer. Nutze sie, wenn du Bewegung in jedem Fall entfernen willst. Bootstrap berücksichtigt prefers-reduced-motion für die eigenen Komponenten bereits – nur dafür brauchst du die Klassen also nicht.

Die bewegungserzeugenden Utilities .animation-shake und .animation-pop sind rein dekorativ und werden bei reduzierter Bewegung automatisch deaktiviert.

CSS-Variablen

Komponenten beschreiben ihre Bewegung als Paar aus -duration- und -timing-Token, sodass du Tempo und Easing getrennt anpassen kannst. Die Fade- und Collapse-Übergänge lesen zum Beispiel --bs-transition-fade-duration / --bs-transition-fade-timing und --bs-transition-collapse-duration / --bs-transition-collapse-timing.

Die Overlay-Komponenten Dialog, Drawer und Menu teilen sich eine Easing-Kurve auf :root-Ebene – eine einzige Überschreibung ändert alle drei. Mehr dazu unter Transitions.

Die Sass-Quellen und die Definition in der Utilities-API findest du in der Originaldoku.