ustaw przejście css na piksel na sekundę

Question

Czy jest więc możliwe ustawienie szybkości przejścia CSS do używania zamiast czasu trwania?

Teraz, jeśli chcę mieć klasę, która przenosi element od lewej do prawej strony innego elementu, prędkość znacznie się zmienia.

Jeśli mam krótki element i chcę przenieść element podrzędny od lewej do prawej, a czas trwania jest ustawiony na np. 1 sekundy, niż porusza się bardzo wolno.

Z drugiej strony, jeśli mam bardzo długi element z tą samą klasą, to podelement przepływa z niewiarygodną prędkością, aby spełnić limit 1 sekundy.

To naprawdę rani moją modularność CSS, więc chciałbym wiedzieć, czy istnieje sposób, aby zapewnić spójność przejść w takich przypadkach.

Answer 1

Nie, nie ma własności transition-speed css, jednak jest transition-timing-function-property

Jeśli używasz tej funkcji, można ustawić prędkość w stosunku do okresu przejściowego, a może użyć kroki, jak również. Zgodnie ze specyfikacją:

Właściwość "przejściowa funkcja czasu" opisuje sposób obliczania wartości pośrednich używanych podczas przejścia. To pozwala na przejście do zmiany prędkości w czasie jej trwania. Te efekty są zwykle nazywane funkcjami ułatwiającymi. W obu przypadkach używana jest funkcja matematyczna zapewniająca płynną krzywą.

Funkcje czasowe są zdefiniowane jako funkcja stopniowania lub sześcienna krzywa Béziera. Funkcja pomiaru czasu przyjmuje jako wartość bieżącą bieżący czas trwania przejścia i podaje wartość procentową przejścia z wartości początkowej do końcowej wartości . Sposób użycia tego wyjścia jest zdefiniowany przez reguły interpolacji dla typu wartości.

Funkcja krokowa jest definiowana przez liczbę, która dzieli domenę operacji na równe odstępy. Każdy kolejny interwał jest równy krokowi bliżej stanu celu. Ta funkcja określa również, czy zmiana procentowej wartości wyjściowej ma miejsce na początku lub końcu przedziału (innymi słowy, jeśli 0% wartości procentowej wejścia jest punktem początkowym zmiany ).

Wierzę, że ta właściwość funkcja rozrządu przejście jest najbliżej rzeczą, co chcesz, ale zdaję sobie sprawę, że nie jest taka sama jak nieruchomości prędkości.

Answer 2

Ponieważ nie można ustawić prędkości, zrobiłem 2 próbki, gdzie mniejsze pudełko porusza się nieco szybciej w próbce 1, co oczywiście musi, ponieważ ma dłuższy sposób podróżowania w tym samym przedziale czasowym.

W przykładzie 2 skompensowałem to, ustawiając czas trwania większego pudełka na 3 s, gdzie teraz (prawie) mają tę samą prędkość.

Najlepszym sposobem byłoby obliczenie odległości do pokonania, w oparciu o rozmiar pudełka, i użycie tej wartości do obliczenia wymaganego czasu, aby pola, bez względu na wielkość, poruszały się z tą samą prędkością.

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