html - 为什么过渡时间适用于颜色，但不适用于文本对齐？

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>