Schwebende Objekte mit CSS3 Keyframe-Animationen

Mit CSS3-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. 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

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.