CSS Animation

[Matthias Scharwies]

Servus!

Nachfrage:

kann man einem so animierten Teil nicht irgendwie einen Schubs geben, dass es auch ohne Mausover-Hover weiter bewegt wird?

Nachtrag:

Hier las ich folgenden Satz:

Ohne besonderes auslösendes Event (z.B. hover oder focus) starten CSS Keyframes-Animationen automatisch, wenn das Dokument im Browserfenster geladen wird.

Das gilt aber scheinbar nicht für die "normale" (hier besprochene) Animation ohne diese "Keyframes"?

Weil wie ich eh wo meinte, solange die Maus über dem animierten Element ist, gehts. Aber im Falle einer X oder Y Bewegung fliegt es ja aus dem Mausberich. Dann ruckelt, zittert es und die Bewegung stoppt. Logisch, aber wie könnte man das noch lösen?

CSS-Animationen starten mit dem Laden des Dokuments:

.animiert  {
  animation: orbit 12s infinite linear;
}

oder, wenn Du mit :hover oder :focus etwas auslöst:

.animiert:hover  {
  animation: orbit 12s infinite linear;
}

Wenn Du willst, dass Maushover überall wirkt, musst du das :hover auf den body setzen:

body: hover .animiert  {
  animation: orbit 12s infinite linear;
}

Das mit dem :hover ist aber ne Krücke. Touchgeräte haben gar kein :hover und manche mögen das hektische Gezuckel gar nicht.

• Animationen_-_den_Nutzer_entscheiden_lassen

Herzliche Grüße

Matthias Scharwies