解决方法@H_301_6@
如果我明白你要做什么,一种方法是改变你的布局,动画左/右属性:
这通过将span元素的右侧设置到屏幕的左侧来利用可见的溢出.悬停在背景上,右侧设置为0,将元素过渡到屏幕上.
注意:在这种情况下,当转换回左边时,您会丢失一些缓存,因为它一直转换到零,而不是文本的自然宽度.
HTML
<div class="bg">
<span class="name">Adam</span>
</div>
CSS
.bg {
background: black;
width: 100%;
height: 20px;
position: relative;
}
.name {
color: white;
left: 0;
position: absolute;
text-align: right;
right: 100%;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
}
.bg:hover .name {
position: absolute;
right: 0;
left: 0;
}
这通过将span元素的右侧设置到屏幕的左侧来利用可见的溢出.悬停在背景上,右侧设置为0,将元素过渡到屏幕上.
注意:在这种情况下,当转换回左边时,您会丢失一些缓存,因为它一直转换到零,而不是文本的自然宽度.
HTML
<div class="bg"> <span class="name">Adam</span> </div>
CSS
.bg { background: black; width: 100%; height: 20px; position: relative; } .name { color: white; left: 0; position: absolute; text-align: right; right: 100%; -webkit-transition-property: all; -webkit-transition-duration: 2s; } .bg:hover .name { position: absolute; right: 0; left: 0; }