ü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