html - 使用 CSS 动画文本

Question

如何平滑地为文本位置设置动画。悬停时，我想将文本从 text-align: center 重新定位到 text-align: left。

从这个状态:

到这个状态:

当我更改 :hover 选择器上的文本对齐时，过渡不平滑。它只是跳到左对齐。

div.subject > div.subjectHeader {
height: 200px;
width: 100%;
color: white;
font-family: 'Lato', 'Helvetica', sans-serif;
font-weight: 700;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
-moz-transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}

div.subject:hover > div.subjectHeader {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 1.5em !important;
    text-align: left !important;
    padding-left: 10px !important;
}

这是 jsfiddle:Link to jsfiddle

Answer 1

The text-align property is not animatable ，因此 CSS 转换不会应用到它。

一种可能的解决方法是将您的文本绝对定位在一个 div 中，并为 left 属性设置动画。例如，像这样修改标题 HTML:

<div class="subjectHeader"><span class="subjectHeaderInner>Chemistry</span></div>

然后使用 left 和 margin 属性为 .subjectHeaderInner 的 CSS 设置动画。不要更改 text-align，因为无法为该属性设置动画。例如:

div.subject .subjectHeaderInner {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    -moz-transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
div.subject:hover .subjectHeaderInner {
    left: 0;
    margin-left: 0;
}

我用这段代码更新了你的 fiddle :http://jsfiddle.net/kAPtL/5/

根据您想要的效果，还可以采用其他解决方法。在 Is it possible to transition text-alignment using CSS3 only? 有一些例子