TranslateX打破粘性导航栏

Question

所以我做了一个粘性导航条，将其粘贴在页面顶部，在该页面上，我有paragraps和我给css这样的元素

.from-left{
     transform: translateX(-80%); } .from-right{
     transform: translateX(80%); } .from-left,.from-right{
    transition: opacity 500ms ease-in, transform 1000ms ease-in;
    opacity: 0; } .from-left.appear,.from-right.appear{
    transform: translateX(0);
    opacity: 1; }

然后我使用交点观察器使它们出现类，以便它们滑入。如果firefox，chrome使我的导航栏在所有元素滑入其位置之前一直滑到顶部，直到所有元素滑入它们的位置，它们才能正常工作到顶部并起作用。我不知道为什么它可以在Firefox中而不是在chrome中工作，以及如何解决它，我猜我可以使元素位置变为绝对位置并重写内容，但是我想避免这种情况。