为什么我的转换会弹回？

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 节点）符合特定条件并且其中之一就是 animated/transitioned 转换（请参阅文章），就会创建合成层参考资料中提到）。现在，当发生这种情况时，GPU 通过更改其合成属性仅将转换应用于合成层。这（出于某种我不知道的原因）似乎没有考虑元素上的 display 设置，因此 element/layer 被翻译。

但是在 transition 的开头和结尾，浏览器会重绘整个页面，因为一旦 transition 完成就不需要额外的合成层，而且这种重绘似乎元素回到原来的位置。

下面是我使用 span 标签上的转换创建的一个非常简单的片段，以说明我的上述观点。运行从 Chrome 开发工具中启用 "Show paint rectangles" 和 "Show composited layer borders" 选项后的代码片段（查看参考条目 3 以了解如何启用这些设置）。您会注意到，最初当您在 body 上的任何位置 hover 并且 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，那么它会在动画中途返回到 'paused'。

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

Answer 3

所选答案不太适合我。我必须将我的元素包装在 div 中，我在其中添加了转换属性，然后我将 display: inline-block 添加到 div.

为什么我的转换会弹回？

Why does my Transform snap back?

html

css

css-transitions

css-transforms