为什么我的变换会突然d回？

为什么我的变换会突然d回？

原因和解决方法：

CSS转换通常不能应用于具有

display:inline

设置的元素。虽然奇怪的是，这种

transform

情况似乎最初发生在回d之前，但解决方案是将设置更改

display: inline-block

为下面的代码段所示。

.blockquote {  font-family: "Open Sans", Verdana, Arial, sans-serif;  font-size: 30px;  line-height: 60px;  width: 100%;  background-color: rgba(0, 0, 0, 0.16);    height: 100px;  text-align: center;  padding-top: 40px;  color: white;  font-weight: 300;  font-style: italic;  transition: all 250ms ease-in-out;}.blockquote .blockquote2 {  transition: all 250ms ease-in-out;  font-size: 25px;  line-height: 35px;  width: 90%;}.blockquote .author {  display: inline-block;  margin-left: -150px;  transition: all 250ms ease-in-out;  font-family: "Roboto", sans-serif;  color: #838eca;  text-transform: uppercase;  font-size: 20px;  letter-spacing: 2px;  line-height: 35px;  opacity: 0;}.blockquote:hover .blockquote2 {  transform: translateX(-20px);  transition: all 250ms ease-in-out;}.blockquote:hover .author {  opacity: 1;  font-weight: 900;  color: rgb(25, 137, 228);  transform: translateX(200px);  transition: all 250ms ease-in-out;}<div >  <div > <b>雕刻</b>自己的路    <p >- Jason Zhang</p>  </div></div>

---

如果元素不可变形，为什么最初会对其进行翻译？

浏览器（至少是Chrome）的行为似乎很奇怪，我只能认为这是一个错误，但是这种行为很可能是由于浏览器中的加速渲染以及创建和移动图层以提供更高性能的方式所致。

在现代浏览器中，只要渲染对象（DOM节点）满足特定条件，就会创建一个合成层，并且其中之一就是进行动画/转换转换（请参阅参考资料中提到的文章）。现在，当发生这种情况时，GPU会通过更改其复合属性将转换仅应用于复合层。这（出于某种我不知道的原因）似乎没有考虑

display

元素上的设置，因此元素/层得到了翻译。

但是，在的开始和结束时

transition

，浏览器会重新绘制整个页面，因为一旦

transition

完成，就不需要额外的合成层，并且此重新绘制似乎将元素放回了原始位置。

下面是我使用

span

标记转换创建的一个非常简单的片段，以说明我的上述观点。在启用Chrome开发工具中的“显示绘制矩形”和“显示合成层边界”选项后，运行该代码段（有关如何启用这些设置，请参见参考项目3）。您会注意到，最初，当您

hover

在任何地方

body

并且

transition

即将开始时，都会进行绘制（屏幕上绿色或红色闪烁）以创建合成层。完成此过程后，您会注意到橙色边框已应用于

span

标签。这是合成层，您将看到当

transition

发生。最后，又发生了一次重新绘制以删除图层（不再需要），这将根据规格将元素放回正确的位置。

body:hover span {  transition: all 1s 1s;  transform: translateX(200px);}<span>abcd</span>

如前所述，我无法提供权威的答案来说明为什么复合层会以这种方式运行，但是基于示例片段和参考文章，您可以看到我的断言成立。