Css过渡一个元素的左右位置

Question

所以我有以下css代码：

#masthead {
    transition: left linear 0.25s;
    -moz-transition: left linear 0.25s;
    -o-transition: left linear 0.25s;
    -webkit-transition: left linear 0.25s;
    -ms-transition: left linear 0.25s;
    transition: right linear 0.25s;
    -moz-transition: right linear 0.25s;
    -o-transition: right linear 0.25s;
    -webkit-transition: right linear 0.25s;
    -ms-transition: right linear 0.25s;
}

我想转换左右两个位置。 但它没有按预期工作。 我意识到这是因为我在css选择器中没有相同的属性声明。

所以我想也许我可以做到这一点，但它仍然不起作用:(

#masthead {
    transition: left, right linear 0.25s;
    -moz-transition: left, right linear 0.25s;
    -o-transition: left, right linear 0.25s;
    -webkit-transition: left, right linear 0.25s;
    -ms-transition: left, right linear 0.25s;
}

我也尝试过：transition: all linear 0.25s; 但问题是，当页面滚动时，标题会变得很粘，并且标题顶部有一个25px高的顶部栏。因此当顶部栏在滚动时隐藏时，标题将转换为顶部。 我还必须关闭在左侧和右侧滑出的画布菜单，当它们执行时，根据触发的画布菜单，标题会被向左或向右推。

向左或向右推动标题，我想触发position: left/right。但不是position: top

我该怎么做呢。

W3schools似乎无法提供解决方案。我认为这可能是不可能的。

干杯

Answer 1

您只需重复属性即可。而不是

transition: left, right linear 0.25s; 

尝试

transition: left linear 0.25s, right linear 0.25s;