过渡运行时的中心 div 看起来不连贯答案

【问题标题】：Center div while transition runs looks choppy过渡运行时的中心 div 看起来不连贯
【发布时间】：2014-04-04 14:52:53
【问题描述】：

我有一个带有文本的内部跨度的 div。这个内部跨度应该始终垂直和水平居中：

<div>
    <span>Text aligned center</span>
</div>

当鼠标悬停时，div 有一个过渡，它会改变它的宽度和高度。

div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}

但是在 Chrome 中（至少）在过渡运行时文本看起来不连贯。我猜这是因为过渡是 1 x 1px，因此“中心样式”必须前后移动 1px。

有没有办法解决这个问题，让它看起来更平滑，比如亚像素？谢谢。

【问题讨论】：

10 秒作为过渡是一个 VEEERY 很长的时间。
只是为了让它更明显
那么实际时间是多少？在适当的速度下是否波涛汹涌？
实际时间是 3 秒，在我看来这很不稳定（看起来像是在摇晃）：jsfiddle.net/QW4Wk/2
即使是 3 秒也太慢了。您应该使用更多 0.5 秒范围内的东西来平滑它

标签： css hover css-transitions

【解决方案1】：

试试这个绝对居中的文本..

span {
  margin: auto;
  color:white;
  text-align:center;
  height:10px;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

当然也会降低你的过渡速度。

【讨论】：

这样看起来更好。谢谢

【解决方案2】：

对跨度应用不同的更改。变换可以是亚像素

div{
    width:200px;
    height:200px;
    background:black;
    position:relative;
    -webkit-transition:width 10s,height 10s;
}
span {
    position:absolute;
    color:white;
    top:75px;
    left:50px;
    width: 100px;
    transition: -webkit-transform 10s;
    -webkit-transform: translate(0px, 0px);
}
div:hover{
    width:250px;
    height:250px;
}

div:hover span {
    -webkit-transform: perspective(999px) translate(25px, 25px);
}

fiddle

【讨论】：