Html 将CSS转换设置为使用速度而不是持续时间？
是否可以将CSS转换设置为使用速度而不是持续时间 现在，若我想让一个类将元素从另一个元素的左侧移动到右侧，速度会有很大的变化 如果我有一个短元素，并且我想将子元素从左向右移动，并且持续时间设置为例如1秒，那么它移动得非常慢 另一方面，如果我有一个很长的元素和同一个类，那么子元素以难以置信的速度闪过，以满足1秒的时间限制Html 将CSS转换设置为使用速度而不是持续时间？,html,css,css-transitions,Html,Css,Css Transitions,是否可以将CSS转换设置为使用速度而不是持续时间 现在，若我想让一个类将元素从另一个元素的左侧移动到右侧，速度会有很大的变化 如果我有一个短元素，并且我想将子元素从左向右移动，并且持续时间设置为例如1秒，那么它移动得非常慢 另一方面，如果我有一个很长的元素和同一个类，那么子元素以难以置信的速度闪过，以满足1秒的时间限制 这真的伤害了我的CSS模块性，所以我想知道是否有办法在这种情况下使转换保持一致。不，没有转换速度CSS属性，但是有一个 如果使用该函数，则可以设置相对于持续时间的过渡速度，也可以
这真的伤害了我的CSS模块性，所以我想知道是否有办法在这种情况下使转换保持一致。不，没有
转换速度我相信这个过渡时间函数属性最接近你想要的，但我知道它与速度属性不同。由于你不能设置速度，我制作了两个示例，其中示例1中较小的框移动得稍快一些，这当然是必须的，因为它在同一时间范围内移动的距离更长 在示例2中，我通过将大盒子的持续时间设置为3s来补偿，现在它们（几乎）具有相同的速度 最好的方法可能是根据盒子的大小计算移动距离，并使用该值计算所需的持续时间，使盒子（无论大小）以相同的速度移动
.div1 div{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
动画名称：示例1；
动画持续时间：4s；
动画迭代次数：无限；
动画计时功能：线性；
}
.2分区{
宽度：200px；
高度：200px；
背景颜色：蓝色；
位置：相对位置；
动画名称：示例2；
动画持续时间：4s；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧示例1{
0%{左：0px；顶：0px；}
100%{左：400px；顶：0px；}
}
@关键帧示例2{
0%{左：0px；顶：0px；}
100%{左：300px；顶：0px；}
}
.3分区{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
动画名称：例3；
动画持续时间：4s；
动画迭代次数：无限；
动画计时功能：线性；
}
.4分区{
宽度：200px；
高度：200px；
背景颜色：蓝色；
位置：相对位置；
动画名称：示例4；
动画持续时间：3s；
动画迭代次数：无限；
动画计时功能：线性；
}
@关键帧示例3{
0%{左：0px；顶：0px；}
100%{左：400px；顶：0px；}
}
@关键帧示例4{
0%{左：0px；顶：0px；}
100%{左：300px；顶：0px；}
}
示例1
样本2
@关键帧幻灯片球{
0%{左边距：0px；}
100%{左边距：计算（100%-30px）；}
}
.滑块{
高度：30px；
背景：蓝色；
边界半径：20px；
利润率：10px；
填充物：5px；
}
#滑块1{
宽度：80px；
}
#滑块2{
宽度：200px；
}
#滑块3{
宽度：500px；
}
.球{
高度：30px；
宽度：30px；
边界半径：30px；
背景：红色；
动画：向前滑动球线性10秒；
}