imposta la transizione css in pixel al secondo

Question

Quindi, è possibile impostare la transizione CSS per utilizzare la velocità anziché la durata?

In questo momento, se voglio avere una classe che sposta l'elemento da sinistra a destra di un altro elemento, la velocità varia notevolmente.

Se ho un elemento corto e voglio spostare il sub elemento da sinistra a destra e la durata è impostata ad es. 1 sec, che si muove molto lentamente.

D'altra parte, se ho un elemento molto lungo con la stessa classe, il sub elemento lampeggia ad una velocità incredibile per soddisfare il limite di tempo di 1 sec.

Questo mi fa davvero male alla modularità dei css, quindi mi piacerebbe sapere se c'è un modo per rendere coerenti le transizioni in questi casi.

Answer 1

No, non c'è alcuna proprietà transition-speed css, tuttavia c'è un transition-timing-function-property

Se si utilizza tale funzione, è possibile impostare la velocità della transizione relativa alla durata, e può utilizzare passi pure. Come da specifica:

La proprietà 'transizione temporizzazione-funzione' descrive come verranno calcolati i valori intermedi utilizzati durante una transizione. È che consente una transizione per cambiare la velocità durante la sua durata. Questi effetti sono comunemente chiamati funzioni di andamento. In entrambi i casi, viene utilizzata una funzione matematica che fornisce una curva uniforme.

Le funzioni di temporizzazione sono definite come una funzione di stepping o una curva di Bézier di cubica. La funzione di temporizzazione prende come input la percentuale attuale della durata della transizione pari a ed emette la percentuale del modo in cui la transizione è dal suo valore iniziale al suo valore finale . Il modo in cui questa uscita viene utilizzata è definita dalle regole di interpolazione per il tipo di valore.

Una funzione stepping è definita da un numero che divide il dominio dell'operazione in intervalli uguali. Ogni intervallo successivo è uguale a e si avvicina allo stato obiettivo. La funzione specifica anche se la variazione della percentuale di output si verifica all'inizio o alla fine di l'intervallo (in altre parole, se 0% sulla percentuale di input è il punto di cambiamento iniziale ).

Credo che questa proprietà funzione di temporizzazione di transizione è la cosa più vicina a ciò che si vuole, ma mi rendo conto che non è la stessa come una proprietà di velocità.

Answer 2

Poiché non è possibile impostare la velocità, ho creato 2 campioni, in cui il riquadro più piccolo si sposta leggermente più velocemente nell'esempio 1, che ovviamente deve, poiché ha un modo più lungo di viaggiare nello stesso intervallo di tempo.

Nell'esempio 2 ho compensato impostando la durata della scatola più grande a 3s, dove ora hanno (quasi) la stessa velocità.

Il modo migliore sarebbe probabilmente calcolare la distanza da percorrere, in base alla dimensione della scatola, e utilizzare tale valore per calcolare la durata necessaria, per fare in modo che le scatole, indipendentemente dalla dimensione, viaggino alla stessa velocità.

.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>