Referenz:SVG/Attribute/keyTimes

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Attribut keyTimes
Beschreibung Mit der Eigenschaft keyTimes 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

default-Wert
animierbar nein
anwendbar auf animate, animateMotion (Unterschied Tag Element Attribut)
Browsersupport
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Spezifikation W3c logo klein.gif keyTimes attribute
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.

Beachten Sie
Tipp