Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Attribut „transition-timing-function“.
So verwenden Sie das CSS-Attribut „transition-timing-function“.
- 藏色散人Original
- 2019-05-29 15:01:322938Durchsuche
Das CSS-Attribut „transition-timing-function“ wird verwendet, um die Geschwindigkeitskurve des Übergangseffekts anzugeben. Diese Eigenschaft ermöglicht es dem Übergangseffekt, seine Geschwindigkeit im Laufe der Zeit zu ändern. Die Syntax lautet Übergangszeitfunktion: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n).
Wie verwende ich das CSS-Attribut „transition-timing-function“?
Funktion: Das Attribut „transition-timing-function“ gibt die an Geschwindigkeit der Übergangseffektkurve. Diese Eigenschaft ermöglicht es dem Übergangseffekt, seine Geschwindigkeit im Laufe der Zeit zu ändern.
Syntax:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
Beschreibung:
linear gibt den Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht kubisch-bezier(0 ,0, 1,1)).
ease gibt den Übergangseffekt an, der langsam beginnt, dann schneller wird und dann langsam endet (cubic-bezier(0.25,0.1,0.25,1)).
ease-in gibt einen Übergangseffekt an, der mit einer langsamen Geschwindigkeit beginnt (entspricht Kubikbezier(0,42,0,1,1)).
ease-out gibt einen Übergangseffekt an, der mit einer langsamen Geschwindigkeit endet (entspricht Kubikbezier(0,0,0,58,1)).
ease-in-out gibt einen Übergangseffekt an, der mit einer langsamen Geschwindigkeit beginnt und endet (entspricht Kubikbezier(0,42,0,0,58,1)).
cubic-bezier(n,n,n,n) Definieren Sie Ihren eigenen Wert in der Kubikbezier-Funktion. Mögliche Werte liegen zwischen 0 und 1.
Hinweis: Internet Explorer 10, Firefox, Opera und Chrome unterstützen das Attribut „transition-timing-function“. Safari unterstützt ein alternatives -webkit-transition-timing-function-Attribut. Hinweis: Internet Explorer 9 und frühere Browser unterstützen das Attribut „transition-timing-function“ nicht.
Beispiel für die Verwendung von CSS-Übergangs-Timing-Funktionseigenschaften
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
transition-timing-function:linear;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:linear;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Effektausgabe:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Attribut „transition-timing-function“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!