使用CSS动画文本

Question

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

从这个状态：

达到这种状态：

当我更改a：hover选择器上的text-align时，转换不是平滑的。它只是跳到左对齐。

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>

然后使用.subjectHeaderInner和left属性为margin的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;
}

我使用以下代码更新了您的小提琴：http://jsfiddle.net/kAPtL/5/

其他解决方法可能取决于您想要的效果类型。 Is it possible to transition text-alignment using CSS3 only?

有一些例子

Answer 2

编辑 Slightly better，因为结束动画无法精确完成（不知道文字长度），所以我做得更简单，但至少它没有＆＃39 ;看看 坏。

这是一个很好的选择，我会说几乎完美。最值得注意的技巧是使用white-space: nowrap有效地使用框尺寸。

HTML布局：

<div>
    <h1>
        <span>Some Title</span>
    </h1>
    <p>some cool explanation</p>
    <p>more explanation</p>
</div>

提供魔力的CSS：

div { border: 5px solid black; height: 18em; padding-top: 2em; position: relative; width: 20em; }
div:hover h1 { height: 1.2em; }
div:hover span { right: 10em; padding-top: 0; }
h1 { bottom: 0; height: 20rem; margin: 0; top: 0; width: 20rem; }
p { padding: 10px; }
span { font-size: 1em; left: 0; padding-top: 4em; position: absolute; right: 0; text-align: center; white-space: nowrap; }
h1, span { background: green; position: absolute; transition: all .3s ease; }

JSFiddle example