为什么我的变换快照？

我试图让我的元素留在现场（过渡之后）。 现在，翻译的位置是我想要的位置，但是我的名字又回到了报价单上。 我是否错过了一段代码，或者是否有一段代码让这个callback发生？

.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

原因和解决scheme：

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> 

Answer 2

哎呀 – 我刚刚读你的问题。 这个例子使得这个名字在animation的结尾处回到前面并留在那里。 我以为这就是你想要的。

好，所以过渡将永远不会停留在hover状态。 我在这里使用animation – 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制作animation，并在我制作的现有animation中添加一个font-weight值。

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

我希望这有帮助。

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

有关animation的更多信息，包括简写代码的顺序 – http://www.w3schools.com/cssref/css3_pr_animation.asp