css transform translate - Frage

[mrpaule]

Hallo,

ich will von Flash-Animationen wegkommen und habe gesehen, dass man mit "transform translate" Objekte/Ebenen bewegen kann. Ich habe auch schon einige Beispielseiten und Tutorials gesehen.

Ist es möglich ein Element nicht nur in eine Achse zu bewegen, sondern auch hin und her bewegen?
Angenommen ich habe ein Querbild als Hintergrund, darüber möchte ich ein weiß-transparentes Logo von rechts nach links bewegen. Wenn es an dem linken Rand angelangt ist, soll es sich wieder zurück bewegen ... und so weiter.
Bislang habe ich das mit Flash gemacht. JS scheidet auch aus.

Danke im Voraus
Paule

 

[Elroy]

Hallo.

Das müsste eigentlich mit der CSS Eigenschaft marquee machbar sein, nur weiss ich nicht ob das auch alle Browser richtig umsetzten oder ob es da Probleme gibt.

Gruss
Elroy

 

[dani33]

Du könntest es vllt auch so machen

.classname {
-webkit-animation: cssAnimation 3.5714s 9 ease-in-out;
-moz-animation: cssAnimation 3.5714s 9 ease-in-out;
-o-animation: cssAnimation 3.5714s 9 ease-in-out;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(0.709) skew(6deg) translate(-300px); }
to { -webkit-transform: rotate(4deg) scale(0.709) skew(6deg) translate(300px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(0.709) skew(6deg) translate(-300px); }
to { -moz-transform: rotate(4deg) scale(0.709) skew(6deg) translate(300px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(0.709) skew(6deg) translate(-300px); }
to { -o-transform: rotate(4deg) scale(0.709) skew(6deg) translate(300px); }
}

muss nur dann überprüfen ob es am ende angelangt ist und die Animation von hinten wieder starten.