使用 CSS 动画文本答案

【问题标题】：Animating Text Using CSS使用 CSS 动画文本
【发布时间】：2014-07-29 04:11:20
【问题描述】：

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

从这个状态：

到这个状态：

当我更改 :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

【问题讨论】：

当您尚未发布您当前使用的代码时，您希望我们如何有效地帮助您？
发布 html/css 和小提琴。
对不起，我不小心点了帖子。
能否请您也发布您的html
我不认为您可以使用 css 转换为 text-align 制作动画。见stackoverflow.com/questions/18235764/…

标签： html css

【解决方案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;
}

我用这段代码更新了你的小提琴：http://jsfiddle.net/kAPtL/5/

其他解决方法是可能的，具体取决于您想要什么样的效果。 Is it possible to transition text-alignment using CSS3 only?有一些例子

【讨论】：

您能否为一个工作示例编辑小提琴？
非常好！正是我想要的！谢谢，但文字偏离中心？你注意到了吗？
我的例子是为了说明一个通用的解决方案。您必须对其进行调整以满足您的需求。

【解决方案2】：

编辑：Slightly better，由于结束动画不能精确地完成（不知道文本长度），我让它更简单，但至少看起来不像那个不好。

这是一个效果很好的替代方案，我会说几乎完美。最值得注意的技巧是使用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

【讨论】：