Übergang
Übergang
英[trænˈzɪʃn] 美[trænˈzɪʃən, -ˈsɪʃ-]
Timing
Timing
英[ˈtaɪm ɪŋ] 美[ˈtaɪmɪŋ]
Funktion
Funktion
Britisch [ˈfʌŋkʃn] Amerikanisch [ˈfʌŋkʃən]
CSS-Eigenschaft „transition-timing-function'. Syntax
Funktion: Das Attribut transition-timing-function gibt die Geschwindigkeitskurve des Übergangseffekts an. Diese Eigenschaft ermöglicht es dem Übergangseffekt, seine Geschwindigkeit im Laufe der Zeit zu ändern.
Syntax: Übergangszeitfunktion: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
Beschreibung: linear Gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht Kubikbezier(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 kubisch-bezier(0,42,0,0,58,1)). Kubikbezier(n,n,n,n) Definieren Sie Ihre eigenen Werte 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.
CSS-Eigenschaft „transition-timing-function'. Beispiel
<!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>Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen