Element im Viewport in CSS hüpfen lassen

Nehmen wir an, Sie wollten ein Element um einen Bildschirm hüpfen lassen, so ähnlich wie bei einem altmodischen Bildschirmschoner oder Pong oder so etwas.

Wahrscheinlich würden Sie die X-Position des Elements verfolgen, diese in einer Zeitschleife erhöhen oder verringern und – wenn das Element den Maximal- oder Minimalwert erreicht – würde es die Richtung umkehren. Dann machen Sie dasselbe mit der Y-Position und schon haben Sie den gewünschten Effekt. Mit etwas JavaScript und Mathematik ganz einfach.

Hier erklärt The Coding Train es klar und deutlich

Hier ist eine Canvas-Implementierung. Es ist Pong, also werden Paddles berücksichtigt und es ist etwas komplizierter, aber die grundlegende Mathematik ist immer noch vorhanden

Siehe den Pen
Pong von Joseph Gutierrez (@DerBaumeister)
auf CodePen.

Aber was, wenn wir das rein in CSS machen wollten? Wir könnten @keyframes schreiben, die die transform- oder left/top-Eigenschaften bewegen… aber welche Werte würden wir verwenden? Wenn wir versuchen, über den gesamten Bildschirm (Viewport) zu hüpfen, müssten wir die Abmessungen des Bildschirms kennen und dann diese Werte verwenden. Aber in CSS kennen wir diese genaue Größe nie.

Oder doch?

CSS hat Viewport-Einheiten, die auf der Größe des gesamten Viewports basieren. Außerdem haben wir calc() und wir kennen vermutlich die Größe unseres eigenen Elements.

Das ist die clevere Grundlage von Scott Kellums Demo

Siehe den Pen
Codepen screensaver von Scott Kellum (@scottkellum)
auf CodePen.

Der besonders knifflige Teil ist, die X-Animation und die Y-Animation in zwei separate Animationen zu zerlegen (eine auf einem Elternteil und eine auf einem Kind), damit beim Richtungswechsel unabhängig voneinander geschehen kann und es mehr wie ein Bildschirmschoner aussieht.

<div class="el-wrap x">
  <div class="el y"></div>
</div>

:root {
  --width: 300px;
  --x-speed: 13s;
  --y-speed: 7s;
  --transition-speed: 2.2s;
}

.el { 
  width: var(--width);
  height: var(--width);
}

.x {
  animation: x var(--x-speed) linear infinite alternate;
}
.y {
  animation: y var(--y-speed) linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--width)));
  }
}
@keyframes y {
  100% {
    transform: translateY(calc(100vh - var(--width)));
  }
}

Diese Idee habe ich übernommen und etwas Blobbigkeit und ein zusätzliches Element für diese kleine Demo hinzugefügt

Siehe den Pen
Morphing Blogs with `border-radius` von Chris Coyier (@chriscoyier)
auf CodePen.