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

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?
„...“
0

Kommentare

shivaZ
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“
0
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.
„...“
0
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; 
}
„...“
0
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.
0
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?
„...“
0
dom_beta02.10.1517:35
Man kann den Inhalt von
.animated
und
.swing
zusammenführen
„...“
0
uplift
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.“
0
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.
„...“
0
sierkb02.10.1518:06
,
0

Kommentieren

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