CSS animation-delay

Animation verzögern mit animation-delay

Das CSS Animations-Modul lässt sich nicht darüber aus, welche Ereignisse eine Animation starten, sondern legt nur fest, was in einer Animation passiert. : hover war einst die beliebteste Methode, um die Animation beim Hovern mit der Maus zu starten, aber beim :hover spielen Touchscreens nicht zuverlässig mit. Beim Hovern mit der Maus ändert CSS cursor:pointer den Mauszeiger und weist auf die Aktion hin, beim Touchscreen gibt es kein Äquivalent.

Aber es gibt weitere Auslöser für Animationen, z.B. :checked, :hover, :active und :focus.

animation-delay verzögert den Start der Animation um eine bestimmte Zeit.

Starten + Warten

<div class="cardo">
	<button id="replay">Starten + Warten</button>
	<div class="bahn">
		<img loading="lazy" src="bluecar.svg" width="200" height="120" alt="Spielzeugauto">
	</div>
</div>

Die Animation startet beim Laden der Seite. Ein Klick auf den Button startet die Animation erneut und wieder mit einer Verzögerung von 3 Sekunden. Bei zwei Zeitangaben ist die erste Zeit (5s) die Dauer der Animation, die zweite (3s) die Verzögerung.

/** Neustart der Animation **/
#replay:active + .bahn {
	animation-name: none;
}

.bahn {
	width: 100%;
	background: gainsboro;
	animation: drive 5s 3s ease-in-out forwards;
}

@keyframes drive {
	to { transform: translate( calc(100% - 200px))}
}

Der Button #restart nutzt die Pseudo-Klasse :active, setzt animation-name auf none, der automatische Ablauf tritt in Kraft und die Animation startet wieder.

animation-fill-mode: forwards ist die Anweisung, die Eigenschaften der Animation nach dem Ablauf der Animation beizubehalten, damit das Elemente am Ende nicht zurückspringt.

Die animation-timing-function ease-in-out führt zu einem langsamen Start, gefolgt von einer leichten Beschleunigung, und am Ende läuft die Bewegung langsamer aus.

Javascript kann Animationen bei beliebigen Aktionen und Events starten und hat drei spezielle Ereignisse für CSS-Animationen: animationstart, animationend und animationiteration.

Animation pausieren mit Keyframes

Dummerweise funktioniert animation-delay nur vor dem Start der Animation und es gibt keine Eigenschaft, die eine Verzögerung vor jedem erneuten Start der Animation bei mehreren Durchläufen bewirkt.

An dieser Stelle hilft das Ausweichen auf eine Keyframes-Animation.

.stop-and-go {
	width: 100%;
	animation: halter 6s ease-in-out infinite;
}

@keyframes halter {
	0%, 30%  { transform: translate( 0)}
	60%, 100% { transform: translate( calc(100% - 200px))}
}

Der erste Keyframe belässt das Element für 2 Sekunden der Zeit auf der Startposition, dann bewegt sich das Element innerhalb von 2 Sekunden zum Ende der Bahn, wartet dort 2 Sekunden. Jetzt beginnt der nächste Durchlauf der Animation, und zwar wieder unbeweglich für 2 Sekunden.

Stufenweise Verzögerung

Das kurz verzögerte Einspielen der Informationen ist eine Geste des Erkennens. Die Animation ist mit CSS umgesetzt, der Javascript Intersection Observer erkennt, wenn die Blöcke im Browserfenster erscheinen.

Einfaches HTML:

<div class="flip-block-columns">
	<div class="flip-section">
		<figure>
		</figure>
		<h3>Lorem Ipsum</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, … </p>
		<button>Lorem</button> 
	</div>
…
</div>

Das CSS für die verzögerte Animation:

.flip-section {
	width: calc(100% - 2rem);
	max-width: 480px;
	margin: auto;
	background: white;
	padding: 1rem;
	margin-bottom: 3rem;
	overflow: hidden;
}

.flip-section * {
	opacity: 0;
	transform: translateY(-20rem);
	transition-property: opacity, transform;
}

.flip-section.flip-in *:nth-child(1)  {
  transition-duration: 0.4s;
  transition-delay: 0.1s;
}

.flip-section.flip-in *:nth-child(2)  {
  transition-duration: 0.4s;
  transition-delay: 0.2s;
}

.flip-section.flip-in * {
	opacity: 1;
	transform: translateY(0)
}

Das Script für den Intersection Observer:

<script>
const flip = document.querySelectorAll (".flip-section");
const options = {rootMargin: "-50px"};

const flipObserver = new IntersectionObserver (function (entries, observer) {
	entries.forEach(function(entry) {
		if (entry.isIntersecting) {
			entry.target.classList.add("flip-in");
		} else {
			entry.target.classList.remove("flip-in");
		}
	});
}, options);

flip.forEach ( function (flip) {
	flipObserver.observe (flip);
});
</script>