したがって、durationではなくspeedを使用するようにCSSトランジションを設定できますか？CSSを1秒あたりのピクセルに設定する
今、要素を別の要素の左から右に移動するクラスを作成したい場合は、速度が大きく異なります。
要素が短く、サブ要素を左から右に移動したい場合、durationを例えばに設定します。 1秒、それは本当に遅く動く。
一方、私が同じクラスの非常に長い要素を持っている場合、サブ要素が信じられないほどの速度で1秒の時間制限を満たすために点滅します。
これは本当に私のCSSのモジュール性を傷つけるので、そのような場合に遷移を一貫させる方法があるかどうかを知りたいと思います。
はいいえ、transition-speed CSSプロパティが存在しない、しかし、あなたは、その機能を使用する場合は、継続時間への移行の相対速度を設定することができ、同様の手順を使用することができますtransition-timing-function-property
があります。仕様通り：
'transition-timing-function'プロパティは、遷移中に使用される中間値の計算方法を示します。 は、その期間にわたって速度を変更するための移行を可能にします。これらの エフェクトは、一般にイージング関数と呼ばれます。いずれの場合も、滑らかな曲線を提供する数学的関数 が使用されます。
タイミング関数は、ステッピング関数または立方体のベジェ曲線として定義されています。タイミング機能は、遷移時間の現在の経過時間をその入力として受け取り、遷移がその開始値から最後の値の への遷移の方法の割合を出力します（）。この出力がどのように使用されるかは、値タイプの補間値の 規則によって定義されます。
ステッピング関数は、 操作のドメインを等しいサイズの間隔に分割する数値によって定義されます。後続の各間隔は、ゴール状態に等しく近いステップである です。この関数は、 の開始時または終了時に出力割合の変化が発生するかどうかを指定します（換言すると、入力パーセントの0％が最初の変更の ポイントであるかどうか）を指定します（ ）。
私はこの遷移タイミング機能プロパティは、あなたが望むものに最も近いものであると信じて、私はそれがスピードプロパティと同じではないことを認識しています。
スピードを設定できないので、2つのサンプルを作成しました。サンプル1では、小さなボックスがわずかに速く動きますが、同じ時間枠内を移動するには長い時間が必要です。
サンプル2では、大きなボックスの継続時間を3秒に設定することで、現在は（ほぼ）同じ速度になっていることを補いました。
最良の方法は、ボックスのサイズに基づいて旅行までの距離を計算し、その値を使用して必要な所要時間を計算し、サイズに関係なくボックスを同じ速度で移動させることです。
.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>
あなたはスピードを設定することはできません。気になる方法は、コンテンツの長さにかかわらず、すべての移動要素を同じサイズに設定することです。実際のコードがどのように見えるかによって異なります。 – LGSon
基本的には... "いいえ"。あなたの唯一の選択肢は期間です。速度が必要な場合は、javascriptを使用して計算する必要があります。 –
もう一つのことは、アニメーション化するときに使用するプロパティです。あなたのコードを投稿すると、それがあなたのために働く方法を見つけやすくなります。 – LGSon