2016-01-10 15 views
7

Also, ist es möglich, CSS-Übergang zu Geschwindigkeit statt Dauer zu setzen?set css übergang zu pixel pro sekunde

Gerade jetzt, wenn ich eine Klasse haben möchte, die Element von links nach rechts von einem anderen Element bewegt, variiert die Geschwindigkeit stark.

Wenn ich kurze Element habe und ich Subelement von links nach rechts verschieben möchten und Dauer auf z. 1sec, als es sich wirklich langsam bewegt.

Auf der anderen Seite, wenn ich ein sehr langes Element mit der gleichen Klasse habe, dann blitzt das Subelement mit unglaublicher Geschwindigkeit durch, um das Zeitlimit von 1 Sekunde zu erreichen.

Das schmerzt wirklich meine CSS-Modularität, also würde ich gerne wissen, ob es eine Möglichkeit gibt, Übergänge in solchen Fällen konsistent zu machen.

+0

Sie können die Geschwindigkeit nicht eingestellt. Ein Weg, der Ihnen in den Sinn kommt, wäre, alle beweglichen Elemente auf die gleiche Größe zu setzen, unabhängig von der Länge des Inhalts, obwohl es wirklich davon abhängt, wie Ihr bestehender Code aussieht. – LGSon

+5

Grundsätzlich ... "Nein". Ihre einzige Option ist die Dauer. Wenn Sie Geschwindigkeit wollen, müssen Sie es mit Javascript berechnen. –

+0

Eine Sache ist natürlich, welche Eigenschaft Sie verwenden, wenn Sie animieren. Am besten, wenn Sie Ihren Code veröffentlichen, würde es einfacher sein, einen Weg zu finden, wie er für Sie funktioniert. – LGSon

Antwort

4

Nein, es gibt keine transition-speed CSS-Eigenschaft, aber es ist eine transition-timing-function-property

Wenn Sie diese Funktion verwenden, können Sie die Geschwindigkeit des Übergangs in Bezug auf die Dauer einstellen, und auch Schritte verwenden können. Gemäß der spec:

Die ‚Übergangszeitpunkt-Funktion‘ Eigenschaft beschreibt, wie die Zwischenwerte während eines Übergangs verwendet wird, berechnet werden. Es ermöglicht einen Übergang, um die Geschwindigkeit über ihre Dauer zu ändern. Diese Effekte werden häufig als Beschleunigungsfunktionen bezeichnet. In jedem Fall wird eine mathematische Funktion verwendet, die eine glatte Kurve liefert.

Timing-Funktionen sind entweder als Stepping-Funktion oder als kubische Bézier-Kurve definiert. Die Zeitfunktion nimmt den aktuellen Verstrichenen Prozentsatz der Übergangsdauer als Eingabe und gibt den Prozentsatz der Art und Weise aus, wie der Übergang von seinem Startwert zu seinem Endwert ist. Wie dieser Ausgang verwendet wird, wird durch die Interpolation Regeln für den Werttyp definiert.

Eine Stepping-Funktion wird durch eine Zahl definiert, die die Domäne von in gleich große Intervalle unterteilt. Jedes nachfolgende Intervall ist ein gleicher Schritt näher zum Zielzustand. Die Funktion gibt auch an, ob die Änderung des Ausgangsprozentsatzes am Anfang oder am Ende des Intervalls auftritt (mit anderen Worten, wenn 0% am Eingangsprozentsatz der Punkt der anfänglichen Änderung ist).

Ich glaube, dieser Übergang Timing-Funktion Eigenschaft ist die am nächsten Sache, was Sie wollen, aber ich bin mir bewusst, dass es als eine Geschwindigkeit Eigenschaft nicht das gleiche ist.

1

Da Sie die Geschwindigkeit nicht einstellen können, habe ich 2 Samples gemacht, wobei sich die kleinere Box in Sample 1 etwas schneller bewegt, was natürlich nötig ist, da sie innerhalb des gleichen Zeitrahmens einen längeren Weg zurücklegt.

In Sample 2 habe ich das kompensiert, indem ich die Dauer der größeren Box auf 3s eingestellt habe, wo sie jetzt (fast) die gleiche Geschwindigkeit haben.

Der beste Weg wäre wahrscheinlich, die Entfernung zu reisen, basierend auf der Größe der Box, und diesen Wert zu verwenden, um die benötigte Dauer zu berechnen, um Boxen, unabhängig von der Größe, mit der gleichen Geschwindigkeit zu fahren.

.div1 div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    animation-name: example1; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 
.div2 div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    position: relative; 
 
    animation-name: example2; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 

 
@keyframes example1 { 
 
    0% {left:0px; top:0px;} 
 
    100% {left:400px; top:0px;} 
 
} 
 
@keyframes example2 { 
 
    0% {left:0px; top:0px;} 
 
    100% {left:300px; top:0px;} 
 
} 
 

 

 
.div3 div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    animation-name: example3; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 
.div4 div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    position: relative; 
 
    animation-name: example4; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 

 
@keyframes example3 { 
 
    0% {left:0px; top:0px;} 
 
    100% {left:400px; top:0px;} 
 
} 
 
@keyframes example4 { 
 
    0% {left:0px; top:0px;} 
 
    100% {left:300px; top:0px;} 
 
}
<br>Sample 1<br> 
 

 
<div class="div1"> 
 
    <div></div> 
 
</div> 
 
<div class="div2"> 
 
    <div></div> 
 
</div> 
 

 
<br>Sample 2<br> 
 

 
<div class="div3"> 
 
    <div></div> 
 
</div> 
 
<div class="div4"> 
 
    <div></div> 
 
</div>