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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 (Autor)
      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 (Autor)
      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

Schreibe einen Kommentar zu Andreas Anton Antworten abbrechen

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 →