CSS3文本悬停效果像进度条一样移动背景

Question

我已经尝试过不同风格的文本背景悬停效果,但不是这一个.

下面的链接是我正在谈论的gif.

http://i.imgur.com/Dw01GKm.gif

为了描述我想要实现的目标,当锚链接处于悬停状态时,背景颜色开始出现在其背面,就像进度条一样,以平滑地填充文本的宽度(我生成的gif质量非常低)为什么它不顺利).

我在www.webdesignerdepot.com上看到了这个效果,我正在尝试重新创建它,但不知道如何做到这一点.

https://jsfiddle.net/eqqcu2cv/

<A href="#">
   Hello World! 
</a>

a {font-size:60px; font-weight: bolder; color:#121212; text-decoration:none;}
a:hover {background:orange;}

Answer 1

a{
  font-size: 60px;
  font-weight: bolder;
  color: #121212;
  text-decoration: none;
  background-position: 0 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, orange 50%);
  transition: background-position 0.5s ease-out 0s;
  background-size: 200.22% auto;
}

a:hover{
  background-position: -99.99% 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, orange 50%);
}

<a href="#">
  Hello World! 
</a>

的jsfiddle