✔ animation

[rernanded]

Nabend,
brauche kurz eine Klarstellung.

Nutze in meinen css für ein div folgende Kurzform:

animation: moving 10s 3;

Entspricht das
animation-name: moving;
animation-delay: 10s;
animation-iteration-count: 3;

oder
animation-name: moving;
animation-duration: 10s;
animation-iteration-count: 3;

MONI

 

[SpiceLab]

animation-delay:

Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.

animation-duration:

Legt die Dauer der Animation für einen kompletten Durchgang fest.

In deinem Fall also duration.

Die Kurzform für die Kombination von duration u. delay würde so lauten:

animation: example 1s 2s

1s = duration
2s = delay

 

[rernanded]

@SpiceLab: Danke.
Anstatt
animation: moving 10s 3;
Könnte ich also auch
animation-name: moving;
animation-duration: 10s;
animation-iteration-count: 3;
schreiben??? Das habe ich probiert, aber dann passiert nix.
MONI

 

[SpiceLab]

Anstatt
animation: moving 10s 3;
Könnte ich also auch
animation-name: moving;
animation-duration: 10s;
animation-iteration-count: 3;
schreiben??? Das habe ich probiert, aber dann passiert nix.

Grundsätzlich sollte da aber was passieren, denn syntaktisch ist soweit alles einwandfrei.

Falls Du es aber in einem Webkit-Browser (Chrome, Opera, Safari) getestet hast, fehlt da natürlich der Präfix -webkit-.

Oder fehlt da vielleicht im Anschluß @-webkit-keyframes moving {...} und @keyframes moving {...} ?

 

[rernanded]

Hallo,
nein sorry, habe Kommentierungen mit // drin und die waren falsch/fehl am Platz, alles okay.

MONI

 

[SpiceLab]

habe Kommentierungen mit // drin und die waren falsch/fehl am Platz, alles okay.

Die Kommentar-Syntax lautet in CSS ausschließlich so:

/* Ich bin ein Kommentar */

 

[rernanded]

@SpiceLab:

ebend, hab ich auch gemerkt.

MONI