Css 如何在页面上的特定位置淡入移动元素？

我试图创建一个CSS动画，在屏幕上移动一个元素，并使其在空间中的特定点淡入。由于使用了不同的缓解功能，我不知道它会在什么时候到达那里

下面是一个在Chromium中有效但在Firefox中无效的示例：

.mover、.marker{
位置：相对位置；
宽度：10vmin；
高度：10分钟；
}
@关键帧移动器{
从{
左：0分钟；
不透明度：-3；
}
到{
左：90分钟；
不透明度：6；
}
}
搬运工先生{
背景：红色；
动画：移动器10秒无限；
}
.马克{
背景：蓝色；
左：30分钟；
}

---

考虑到您希望缓慢显示内容的事实，我将使用不同的方法来实现与不透明度类似的效果。我会考虑使用另一个动画隐藏在元素之上的覆盖。

这里的想法是使用具有相同度量的动画，以便与移动器动画同步，并且仅在空间的所需点显示元素

这样做，我将考虑一个伪元素，它的宽度等于路径的宽度（<代码> 90vmin -0vmin＝90vmin < /代码>），它将在相反的方向上被动画化。这个元素将有一个渐变颜色，这个颜色将创造魔术

以下是一个例子：

.mover、.marker{
位置：相对位置；
宽度：10vmin；
高度：10分钟；
z指数：0；
溢出：隐藏；
颜色：#fff；
}
搬运工：以前{
内容：“；
位置：绝对位置；
z指数：99；
顶部：-1px；
底部：-1px；
左：0；
宽度：90vmin；
背景：线性梯度（向右，#fff 33%，透明）；
动画：音量控制器10s无限；
动画计时功能：继承；
}
搬运工先生{
背景：红色；
动画：移动器10秒无限；
}
.马克{
背景：蓝色；
左：30分钟；
}
@关键帧移动器{
从{
左：0分钟；
}
到{
左：90分钟；
}
}
@关键帧音量控制器{
到{
转化：translateX（-100%）；
}
}

1
2.
3.

我想说您这样做是错误的，因为您使用的是无效值，因此每个浏览器可能会以不同的方式处理此问题，并尝试显示某些内容。尽管使用了错误的值，但OPE会显式允许超出此范围的值，并表示它们将被钳制。它只是没有说什么时候。嗯，可能“无效”这个词不合适，但我的意思是，您使用的是不需要的*/*异常值，并且由于没有定义如何处理它们的算法，因此您有不同的行为。。。试图理解为什么会这样并不坏，但我认为我们应该避免依赖随机行为。不管怎么说，就像你问的，我很确定我们可以以不同的方式实现这一点。我也是。直到我尝试过。在顶部放置另一个元素是个好主意，但不幸的是，它在我的实际情况下不起作用，因为它有一个复杂的分层渐变背景，而不是纯白色…@Thomas To bad。。。你有没有办法和这些背景的人分享一个真实的案例？也许我能找到一些我以前从未听说过的

剪辑路径

，我想我无法使用它。然而，我认为我可以使用一个更简单的想法：一个带有

溢出：隐藏
的包装器元素。在我的实际情况下仍然不起作用（我在本例中使用了一个更复杂的圆周运动），但无论如何，出于其他原因，我可能会重新设计它。感谢所有的投入@Thomas是的，包装器解决方案会很好，但我认为您将无法调整HTML，并且定义空间中点的属性需要属于动画元素，因此我没有详细说明此解决方案。