Question

我试图让我的元素留在现场（过渡后）。现在，翻译的位置是我想要的地方但是我的名字会重新回到报价上。我是否错过了一段代码，或者是否有一段代码正在使这种快照发生？

.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);
  /*rgba(192, 241, 247, 0.15);*/
  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;
  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 class="blockquote">
  <div class="blockquote2"> <b>雕刻</b>自己的路
    <p class="author">- Jason Zhang</p>
  </div>
</div>

Answer 1

原因和解决方案：

CSS变换通常不能应用于display: inline设置的元素。虽然奇怪的是transform似乎确实在抢回之前发生了，但解决方法是将设置更改为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);
  /*rgba(192, 241, 247, 0.15);*/
  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 class="blockquote">
  <div class="blockquote2"> <b>雕刻</b>自己的路
    <p class="author">- 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>

如前所述，我无法提供关于合成层为何如此行为的权威答案，但基于示例代码段和参考文章，您可以看到我的断言保持良好。

<强>参考文献：

Answer 2

哎呀 - 我刚刚再次阅读你的问题。此示例使名称在动画结束时快速返回并保留在那里。我以为那就是你想要的。

好的，转换永远不会保持在悬停状态。我在这里使用动画制作了一个 - http://codepen.io/Haelu/pen/qdLxao

-webkit-animation: authoranim 250ms ease-in-out normal forwards;
  animation: authoranim 250ms ease-in-out normal forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;

@-webkit-keyframes authoranim {
  0% {
    -webkit-transform: translateX(0px);
    opacity:0;
  }
  50% {
    -webkit-transform: translateX(210px);
    opacity:1;
  }
  90% {
    -webkit-transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }

  @-keyframes authoranim {
  0% {
    transform: translateX(0px);
    opacity:0;
  }
  50% {
    transform: translateX(210px);
    opacity:1;
  }
  90% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }

这与你所拥有的不完全相同，但也许你可以改进它。添加另一组关键帧以将blockquote div设置为左侧动画，并将font-weight的值添加到我制作的现有动画中。

我很确定-webkit-是现在唯一需要的前缀，因为大多数现代浏览器都会在没有它的情况下运行代码，因此您可以看到使用该前缀重复所有内容。

我希望这会有所帮助。

唯一的另一件事是，如果在动画结束前将鼠标移到div之外，那么它将在动画中期返回“暂停”状态。

有关动画的更多信息，包括速记代码的顺序 - http://www.w3schools.com/cssref/css3_pr_animation.asp

Answer 3

选择的答案对我而言不太有效。我必须将元素包装在添加了转换属性的div中，然后在该div中添加了display: inline-block。

为什么我的转换会回弹？

3 个答案: