SVG/Attribut/keyTimes

Mit dem keyTimes-Attribut können Sie in einer durch Semikola getrennten Liste Werte für die jeweilige Dauer der einzelnen in values festgelegten Schritte angeben.

Erlaubte Werte

erster Wert ist immer 0; letzter 1

Standardwert

anwendbar auf

animate, animateMotion

Präsentationsattribut

nein

mit CSS animierbar

nein

Beispiel

<animate 
    href="#orange-circle"
    attributeName="cy"
    to="250" 
    dur="3s"
    begin="click"
    values="50; 250; 120;250; 170; 250; 210; 250"
    keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
    keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;"
    fill="freeze" 
    id="circ-anim"/>

Für die einzelnen keyTimes-Attributwerte sind je 4 keySplines-Werte definiert, die den Kreis hüpfen lassen.

Siehe auch

• SMIL#mehrstufige Animationen

Weblinks

Spezifikation (W3C): keyTimes attribute

• MDN: keyTimes