为什么我的过渡变换表现得很奇怪？答案

【问题标题】：Why is my transition transform acting weird?为什么我的过渡变换表现得很奇怪？
【发布时间】：2014-07-03 06:58:38
【问题描述】：

因此，对于我的俱乐部日历，我正在尝试制作一个过渡播放，其中 td 在悬停时会变得更大。但是，当我这样做时，虽然里面的文字变大了，但盒子并没有真正变大。此外，彩色盒子有这种奇怪的后效应，顶部和/或底部保持较大。这是小提琴（我是新手，所以如果链接不起作用，我很抱歉）：

http://jsfiddle.net/glenohumeral13/Lcs68/

我认为是相关代码：

td {
    width: 35px;
    text-align:center;
    font-family: Helvetica, Arial;
    font-size: 16px;
    font-weight: 100;
    transition: transform 1s ease-in;
}
td:hover {
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

如果您能修复它，我将不胜感激为什么该解决方案有效，因为我希望将来能够修复此问题以及相关问题我自己。谢谢！编辑：感谢大家的快速回复！我尝试了所有解决方案，但是一旦过渡结束，这些框就会变白。出于某种原因，这可能只是我的电脑吗？编辑：没关系：问题解决了！谢谢大家！最后编辑：对不起！我正在使用 Chrome，如果它现在对任何人有帮助的话。

【问题讨论】：

您在哪个浏览器中看到了这些奇怪的效果？它在 Firefox 和 IE 中对我来说很好用，在 Chrome 中根本不行。
如果您提到的问题发生在 Chrome 中，只需添加 transition: -webkit-transform 1s ease-in.. 您需要转换为 -webkit 前缀的版本。这似乎是解决办法.. jsfiddle.net/6CX7r
@Josh Crozier：这提醒了我......当与 transition 结合使用其他使用前缀的转换属性时，我一直难以协调跨浏览器支持和供应商前缀。但我确实发布了我的发现 - 特别是 Chrome 对此非常奇怪：stackoverflow.com/questions/22457222/… 我怀疑它并没有完全解决问题，但是首先处理前缀总是很痛苦。
@BoltClock 我记得在您发布该答案时已阅读/支持该答案。你发给他们的那封电子邮件有什么回复吗？编辑：我看到它在链接中，没关系。
@Josh Crozier：是的，如果您访问链接电子邮件的页面，您会看到导航链接 - 使用“线程中的下一步”来关注对话。

标签： css

【解决方案1】：

LIVE DEMO

更新：

现在for modern browser (>= IE10) 不需要在transition 声明中为transform 的属性添加前缀。

td {
   width: 35px;
   text-align: center;
   font-family: Helvetica, Arial;
   font-size: 16px;
   font-weight: 100;
   transition: /*transform*/ 1s ease-in;
}

（问题是通过删除transform来解决的，所以它得到默认值all）

... transition: all 1s ease-in; ...

【讨论】：

那解决了什么问题以及如何解决？
@torazaburo - 前缀问题......但现在它无关紧要......注意：（这个问题已经将近 3 年了）