Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Schwebende Objekte mit CSS Keyframe-Animationen

Mit CSS-Animationen lassen sich viele Effekte unkompliziert und performant umsetzen. In diesem Beitrag möchte ich den CSS-Code für einen Schwebe-Effekt archivieren. Mit Hilfe einer Keyframe-Animation wird das Objekt dazu lediglich auf der Y-Achse auf- und ab bewegt.

CSS-Klassen für Schwebezustand

Ich habe die Animation in eine eigene CSS-Klasse (.hovering) verpackt um sie anschließend auf verschiedene Objekte anwenden zu können.
Mit animation-name legen wir einen Namen für unsere Animation fest. animation-duration: 3s bestimmt wie viel Zeit der Animation für einen Durchlauf zur Verfügung steht (3 Sekunden) und animation-iteration-count: infinite lässt die Animation in Endlosschleife laufen. Es fehlt noch die Animationskurve, also die Beschleunigung der Bewegung. Mit animation-timing-function: ease-in-out wird die Animation am Anfang und am Ende leicht abgebremst. Das sorgt für einen natürlicheren Effekt.

.hovering {
    animation-name: hovering;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

Keyframe-Animation

Die Animation haben wir mit einem Namen bereits angesprochen und ihr mitgeteilt wie lange und auf welche Art sie sich zu bewegen hat. Es fehlt allerdings noch die Bewegung selbst.
Mit den 2D-Tranformations-Effekten von CSS bewegen wir das Objekt auf der Y-Achse auf und ab. Bei 0% der Animation befindet es sich ganz unten, nach 50% der Zeit wurde es um 25px nach oben verschoben, am Ende der Animation (100% Zeit) befindet es sich wieder an der Startposition. Das war schon alles.

@keyframes hovering {
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
}

Das funktionierende Beispiel inkl. Vendor-Präfixe könnt ihr euch hier anschauen.

Vollständiger CSS-Code

Der komplette CSS-Code des Beispiels sieht so aus:

.hovering {
    animation-name: hovering;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes hovering {
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-animation feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 10 Kommentare

  1. Mat
    schrieb am 20.11.2013 um 10:53 Uhr:

    Inspirierendes Tutorial. Hab auch noch etwas mit Schatten ohne zusätzliches Bild experimentiert.
    http://codepen.io/macgamper/pen/cjHyL

    Cool wäre es ja den Schatten mit box-shadow zu lösen, dann könnte man auch noch die Weichzeichnung des Schattens je nach Distanz zum Objekt animieren (näher = schärfer, weiter weg = unschärfer). Leider scheint sich box-shadow aber nicht flüssig animieren zu lassen :( http://codepen.io/macgamper/pen/AzDkn

    Aber vielleicht hat da noch jemand eine bessere Lösung?

    Antworten
    • Andreas K.
      schrieb am 10.12.2013 um 10:13 Uhr:

      evtl. mit zwei Schatten arbeiten (harter+weicher) und über tranzparenz umblenden?

      Antworten
  2. Sebastian
    schrieb am 26.10.2013 um 20:16 Uhr:

    Richtig nett. Super Beispiel

    Antworten
  3. webwelten
    schrieb am 24.10.2013 um 12:57 Uhr:

    Habe mal einen Versuch gestartet, den Schatten auf die Schnelle auch zu animieren:
    http://codepen.io/webwelten/pen/upzIv

    Antworten
    • Jonas Hellwig
      schrieb am 25.10.2013 um 09:22 Uhr:

      Sehr schön! Vielen Dank! :)

      Antworten
  4. Stephan Hövelbrinks
    schrieb am 24.10.2013 um 10:01 Uhr:

    Im Firefox scheint die Animation nicht so weich wie im Chrome und Internet Explorer. Kann das daran liegen, dass die Grafikposition beim Firefox auf genaue Pixelmaße einrastet und nicht zwischen den Pixeln überblendet?
    Oder habe ich nur was mit den Augen?

    Antworten
    • Philipp
      schrieb am 24.10.2013 um 10:59 Uhr:

      Kann ich auch nachvollziehen. Allerdings auch beim Internet Explorer. Speziell an den Punkten, wo die Animation langsamer wird und sich dann wieder umkehrt. Da erweckt es durchaus den Eindruck, als würde es „auf Pixelmaße einrasten“.

      Antworten
  5. Philipp
    schrieb am 24.10.2013 um 09:28 Uhr:

    Hey,

    Der Vollständigkeit halber: Animiere doch den Schatten auf die selbe Art und Weise! Wenn das Icon oben ist, sollte der Schatten unten kleiner sein.

    Sieht sonst sehr gut aus. ;)

    Antworten
    • Jonas Hellwig
      schrieb am 24.10.2013 um 10:53 Uhr:

      Ich habe noch überlegt etwas zu dem Schatten zu schreiben ;) Um das Beispiel simpel zu halten habe ich nur ein Objekt animiert.

      Antworten
    • Andreas Anton
      schrieb am 27.08.2015 um 22:19 Uhr:

      Ich denke, wenn der Icon oben ist, sollte der Schatten größer sein.
      Die Lichtquelle ist über dem Element, also vergrößert sich der Schattenwinkel.
      Aber das Beispiel ist gut, ich beschäftige mich gerade mit keyframes.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →