Working CodePen

这通过将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;
}