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