.blockquote {
font-family: "Open Sans",Verdana,Arial,sans-serif;
font-size: 30px;
line-height: 60px;
width: 100%;
background-color: rgba(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>
解决方法
CSS变换通常不能应用于具有显示的元素：内联设置.虽然奇怪的是转换似乎最初在抢回之前发生,但解决方案是将设置更改为显示：内联块,如下面的代码段所示.
.blockquote {
font-family: "Open Sans",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",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通过更改其合成属性将转换仅应用于合成层.这(由于某些原因我不知道)似乎没有考虑元素的显示设置,因此元素/层被翻译.
然而,在转换的开始和结束时,浏览器重新绘制整个页面,因为一旦转换完成就不需要额外的合成层,并且此重新绘制似乎将元素放回原始位置.
下面是一个非常简单的代码片段,我使用span标签上的变换创建,以说明我的观点.从Chrome开发工具启用“显示绘制矩形”和“显示合成图层边框”选项后运行代码段(请参阅参考项3以了解如何启用这些设置).您将注意到,最初当您将鼠标悬停在身体上的任何位置并且即将开始转换时,会发生绘制(屏幕上出现绿色或红色闪烁)以创建合成图层.完成此过程后,您会注意到橙色边框已应用于span标记.这是合成图层,您将看到当转换发生时,此图层如何移动.最后,另一次重新绘制会删除图层(因为不再需要),这会根据规格将元素放回正确的位置.
body:hover span {
transition: all 1s 1s;
transform: translateX(200px);
}
<span>abcd</span>
如前所述,我无法提供关于合成层为何如此行为的权威答案,但基于示例代码段和参考文章,您可以看到我的断言保持良好.
参考文献：
> W3C Spec – Transformable elements
> Chromium Projects – GPU Accelerated Rendering in Chrome
> HTML5 Rocks – Accelerated Rendering in Chrome
