为什么过渡时间对颜色有效，但对文本不起作用？

Question

我正在尝试通过：hover切换文本对齐方式时添加过渡时间。过渡已正确添加到颜色中，但未添加文本对齐方式。

示例：Codepen

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

div:hover>h1 {
  color: #ddd;
  text-align: right;
  transition: .6s ease-in !important;
}

<div>
  <h1>Lorem Ipsum</h1>
</div>

Answer 1

我想只是CSS工作组出于某种原因决定不实施它。但是还有其他方法，请使用位置和变换技巧查看下面的演示。

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
  position: relative;
}

h1 {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  margin: 0;
  transition: 0.6s ease-in;
}

div:hover > h1 {
  color: #ddd;
  left: 100%;
  transform: translateX(-100%);
}

<div>
  <h1>Lorem Ipsum</h1>
</div>

另一种方法是制作width的动画。

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

h1 {
  width: 0;
  text-align: right;
  white-space: nowrap;
  margin: 0;
  transition: 0.6s ease-in;
}

div:hover > h1 {
  color: #ddd;
  width: 100%;
}

<div>
  <h1>Lorem Ipsum</h1>
</div>

Answer 2

transform: translateX()

text-align不是animatable，而是position和transforms-后者是更好的选择，因为它比前者less GPU/CPU intensive。以下是在演示中作为动画第一站添加的内容。

transform:translateX(300px);
transition: transform .6s ease-in;

---

演示

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

h1 {
  transform: translateX(0px);
  transition: transform .6s ease-out;
}

div:hover>h1 {
  color: #ddd;
  width: 200px;
  transform: translateX(300px);
  transition: transform .6s ease-in;
}

<div>
  <h1>Lorem Ipsum</h1>
</div>