kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Schwebende Objekte mit CSS3 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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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. Hilfsmittel zur Konstruktion eigener Animationskurven findet ihr hier.


.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 CSS3 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);}
}

Vendor-Präfixe notwendig

Der oben gezeigte Code verwendet aus Gründen der besseren Übersicht keine Vendor-Präfixe. Zum Veröffentlichungs-Zeitpunkt dieses Beitrags müssen diese allerdings noch geschrieben werden. Hier könnt ihr den stets aktuellen Browser-Support nachschlagen.

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

Vollständiger CSS-Code inkl. Vendor-Präfixe

Der komplette CSS-Code des Beispiels sieht so aus:


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

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

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

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

Beispieldateien herunterladen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

10 Kommentare

  1. Philipp

    Verfasst am 24. Oktober 2013 um 9: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. ;)

    • Jonas Hellwig

      Verfasst am 24. Oktober 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.

    • Andreas Anton

      Verfasst am 27. August 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.

  2. Stephan Hövelbrinks

    Verfasst am 24. Oktober 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?

    • Philipp

      Verfasst am 24. Oktober 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“.

  3. webwelten

    Verfasst am 24. Oktober 2013 um 12:57 Uhr.

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

  4. Sebastian

    Verfasst am 26. Oktober 2013 um 20:16 Uhr.

    Richtig nett. Super Beispiel

  5. Mat

    Verfasst am 20. November 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?

    • Andreas K.

      Verfasst am 10. Dezember 2013 um 10:13 Uhr.

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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.