CSS Animation von rechts nach links einblenden lassen

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>CSS Animation von rechts nach links einblenden lassen

dom_beta29.09.1515:40

Hallo,

wie kann man in CSS eine Animation erstellen, die ein Objekt von rechts nach links einblenden lässt?

Ich habe zwar im Web zwar was gefunden, allerdings weiß ich nicht, wie ich das so umbauen muss, damit es passt.

Hat da jemand ein konkretes Beispiel?

„...“

Kommentare

shivaZ29.09.1519:39

... ein Objekt kann natürlich vieles bedeuten, was es in deinem Fall bedeuten soll, das kannst im Moment nur DU wissen

Grundsätzlich nach "Animation" oder auch "Transition" Ausschau halten, event. helfen dir einige Beispiele weiter oder // noch ein fiddle (oben auf Run klicken) .. das Ganze dementsprechend angepasst und es könnte vielleicht schon passen

Gruß

„ɔɐɯ ɔɐɯ ɔɐɯ - sometimes I sit and think, and sometimes I just sit“

dom_beta30.09.1514:07

es gibt übrigens ein CSS Animation Generator. Da bekommt ein gutes Grundgerüst, finde ich gut, das kann man besser nachvollziehen. Außerdem kann man dies dann schnell den eigenen Vorstellungen anpassen.

„...“

dom_beta30.09.1517:07

mal ne Frage.

Wie kann man denn den generierten Code irgendwie zusammenfassen, wenn möglich?

Lässt sich das irgendwie zusammenfassen?

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

„...“

Krypton30.09.1518:59

aktuell: nein. In 3 oder 4 Jahren könntest du alles weglassen, was mit «-webkit» oder «@-webkit» beginnt. Aktuell benötigen das noch die Safari-Versionen 8.x und älter.

dom_beta01.10.1506:48

Krypton

aktuell: nein. In 3 oder 4 Jahren könntest du alles weglassen, was mit «-webkit» oder «@-webkit» beginnt. Aktuell benötigen das noch die Safari-Versionen 8.x und älter.

also man kann nicht den Inhalt von .animated und keyframes zusammenlegen?

„...“

dom_beta02.10.1517:35

Man kann den Inhalt von

.animated

und

.swing

zusammenführen

„...“

uplift02.10.1517:40

Kennst Du dieses Grundgerüst?

„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“

dom_beta02.10.1517:42

uplift

Kennst Du dieses Grundgerüst?

nee, aber einen anderen Generator. Aber mal ehrlich, die ganzen Ani's sind ja ohnehin alle gleich.

„...“

sierkb02.10.1518:06

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Apple aktualisiert Zubehör: Magic Mouse, Magic ...

UltraFine 6K: LG möchte Apple mit neuem 32-Zoll...

Neuer Mac: Vorbereitung für den Umzug vom alten...

Interview: Größte private Mac-Sammlung

Mac OS X: 25 Jahre Aqua, 25 Jahre Dock

Mac-Wartung: Alte Kernel-Erweiterungen entfernen

20 Jahre Mac mini

Kurz: Apple bietet iPhone 15 erstmals refurbish...