CSS/Eigenschaften/animation-timing-function
Aus SELFHTML-Wiki
CSS | Eigenschaften
Die Eigenschaft animation-timing-function definiert die Geschwindigkeitskurve der Animation
- Erlaubte Werte
ease
: Übergang mit langsamen Start, beschleunigt und endet langsam (Standardwert) (⇔ cubic-bezier(0.25,0.1,0.25,1))ease-in
: Übergang mit einem langsamen Start (⇔ cubic-bezier(0.42,0,1,1))ease-out
: Übergang mit einem langsamen Ende (⇔cubic-bezier(0,0,0.58,1))ease-in-out
: Übergang mit einem langsamen Start und Ende (⇔ cubic-bezier(0.42,0,0.58,1))linear
: Übergang mit gleicher Geschwindigkeit vom Start bis zum Stop (⇔ cubic-bezier(0,0,1,1))-
linear()
: Die gleichnamige CSS-Funktion erlaubt 2 oder mehr durch Kommata getrennte Zahlen von 0 bis 1 oder Prozentangaben[1] cubic-bezier(n,n,n,n)
: Diese CSS-Funktion benötigt vier durch Kommata getrennte numerische Werte von 0 bis 1 oder Prozentangaben.
Sie erzeugen eine Bézier-Kurve.[2]- steps(Anzahl) – Diese CSS-Funktion lässt die Animation schrittweise ausführen, ohne dass jede Wegmarke einzeln notiert werden muss.[3]
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
ease
- anwendbar auf
- Vererbung
nein
- animierbar
nein
Beispiel
aside {
animation-name: beispiel;
animation-duration: 3s;
animation-timing-function: ease-out;
}
@keyframes beispiel {
from {background-color: #000;}
to {background-color: #fff;}
}
Die Animation läuft langsam aus.
Siehe auch
Weblinks
- ↑ MDN: [[https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/linear linear()-Function
- ↑ MDN: cubic-bezier()
- ↑ MDN: steps()-Function
Liste der CSS-Eigenschaften
- Animationen
- animation
- offset
- offset-anchor
- offset-distance
- offset-path (ehem. motion-path)
- offset-rotate
- transition
- will-change
- Abstände
- Benutzeroberfläche
- Container
- generierter Inhalt
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Scroll Snap
- Rahmen und Schatten
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen