【问题标题】:Firefox transitions not workingFirefox 过渡不起作用
【发布时间】:2026-01-26 03:20:03
【问题描述】:

这是我的 CSS 设置:

#element1, #element2{
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s; 
}

body.open #element1, body.open #element2 {
   left: 245px; 
 }

问题是转换在 Firefox 中不起作用,在所有其他浏览器中都可以。

【问题讨论】:

  • 你能发布html吗?
  • HTML 并没有什么特别之处,我只有我想要动画的那两个 div。
  • 悬停动画?你能在 jsfiddle 上发布一个完整的例子吗?
  • 这是一个基本的小提琴,它同样适用于 chrome,但不适用于 FF:jsfiddle.net/sK7Wk/2

标签: css firefox transition


【解决方案1】:

您需要为 firefox(现在是 Chrome)设置一个起始左侧。

#element1, #element2{
    left: 0px;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s; 
}

始终为任何过渡设置默认值会更好。这样您就可以完全控制。

【讨论】:

  • Firefox 和 Chrome 都需要初始 left 值才能让左转换工作。
  • @FelipeMicaroniLalli 愿意分享什么对您有用?刚刚在 Chrome 和 Firefox 中尝试了小提琴,它没有问题。
  • #div1, #div2 { 左:0;过渡:0.5s; -o-过渡:0.5s; -ms-过渡:0.5s; -moz 过渡:0.5 秒; -webkit-transition:0.5s; } 在 Chrome 上运行良好,但在 Firefox 中无法运行。
  • 您运行的是哪个版本的 Firefox?老实说,它对我有用,并且已经有一段时间了。它甚至比以前更好。在您必须从类似单位 (px->px) 转换之前,因此使用无单位 0 是一个问题。您实际上是在说转换在 Firefox 中不起作用,我知道事实并非如此。
最近更新 更多