Html 为什么我的变换会突然恢复？

我试图让我的元素留在原地（在过渡之后）。现在，翻译的位置就是我想要的地方，但是我的名字又回到了报价单上。我是否遗漏了一段代码，或者是否有一段代码导致了这种快速恢复

.blockquote{
字体系列：“开放式Sans”、Verdana、Arial、Sans serif；
字体大小：30px；
线高：60px；
宽度：100%；
背景色：rgba（0,0,0,0.16）；
/*rgba（192,241,247,0.15）*/
高度：100px；
文本对齐：居中；
填充顶部：40px；
颜色：白色；
字体大小：300；
字体：斜体；
过渡：所有250ms缓进缓出；
}
.blockquote.blockquote2{
过渡：所有250ms缓进缓出；
字体大小：25px；
线高：35px；
宽度：90%；
}
.blockquote.作者{
显示：内联；
左边距：-150px；
过渡：所有250ms缓进缓出；
字体系列：“Roboto”，无衬线；
颜色：#838eca；
文本转换：大写；
字体大小：20px；
字母间距：2px；
线高：35px；
不透明度：0；
}
.blockquote:悬停.blockquote2{
转换：translateX（-20px）；
过渡：所有250ms缓进缓出；
}
.blockquote:hover.author{
不透明度：1；
字号：900；
颜色：rgb（25137228）；
转换：translateX（200px）；
过渡：所有250ms缓进缓出；
}

雕刻自己的路
-Jason Zhang

原因和解决方案：

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

display:inline

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

转换

最初似乎是在回拍之前发生的，但解决方案是将设置更改为

display:inline block

，如下面的代码片段所示

.blockquote{
字体系列：“开放式Sans”、Verdana、Arial、Sans serif；
字体大小：30px；
线高：60px；
宽度：100%；
背景色：rgba（0,0,0,0.16）；
/*rgba（192,241,247,0.15）*/
高度：100px；
文本对齐：居中；
填充顶部：40px；
颜色：白色；
字体大小：300；
字体：斜体；
过渡：所有250ms缓进缓出；
}
.blockquote.blockquote2{
过渡：所有250ms缓进缓出；
字体大小：25px；
线高：35px；
宽度：90%；
}
.blockquote.作者{
显示：内联块；
左边距：-150px；
过渡：所有250ms缓进缓出；
字体系列：“Roboto”，无衬线；
颜色：#838eca；
文本转换：大写；
字体大小：20px；
字母间距：2px；
线高：35px；
不透明度：0；
}
.blockquote:悬停.blockquote2{
转换：translateX（-20px）；
过渡：所有250ms缓进缓出；
}
.blockquote:hover.author{
不透明度：1；
字号：900；
颜色：rgb（25137228）；
转换：translateX（200px）；
过渡：所有250ms缓进缓出；
}

雕刻自己的路
-Jason Zhang

哎呀，我刚刚又读了一遍你的问题。此示例使名称在动画结束时回到前面并保持不变。我以为这就是你想要的

好的，因此转换将永远不会保持悬停状态。 我用动画制作了一个-

这与您所拥有的并不完全相同，但也许您可以改进它。添加另一组关键帧以设置左侧blockquote div的动画，并在我制作的现有动画中添加字体权重值

我敢肯定-webkit-是现在唯一需要的前缀，因为大多数现代浏览器运行的代码都没有这个前缀，所以你可以看到所有东西都是用这个前缀复制的

我希望这有帮助

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

---

有关动画的更多信息，包括速记代码的顺序-

所选答案对我来说不太合适。我必须将我的元素包装在一个div中，在该div中我添加了变换属性，然后我向该div添加了

display:inline block

。

不确定为什么这将作为dupe关闭。链接的问题是关于CSS动画的，而问题中的代码只使用转换，而不使用动画<代码>动画填充模式属性对这个没有任何用处，除非OP决定整体改变他们的方法。@Harry同意，这看起来很不同，不会重复。我已经重新打开了线程，因为这绝不是重复的（我在上面的评论中已经解释过）。我想指出，在某些情况下，

动画填充模式：正向

将确保翻译停止在

向前

位置。

-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);
  }