向文本平滑添加渐变无法正常工作？

Question

span {
  font-size: 2rem;
}

span {
  cursor: pointer;
  transition: all 2000ms ease-in-out;
}

span:hover {
  background: -webkit-linear-gradient(135deg, #ff8792, #ff4c9f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<span> gradient on hover</span>

基本上，我在鼠标悬停时在文本上添加了渐变，但是似乎一点都不平滑，所以我添加了transition，但是它根本不起作用，如何实现呢？感谢所有帮助！

关于此的演示 http://jsfiddle.net/21795bor/