Adding gradient to text smoothly not working?

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>

Basically I'm adding a gradient to text on mouseover, but It seems not smooth at all so I added a transition but It doesn't work at all, how can I achieve this? Appreciate for all the help!

Demo on this http://jsfiddle.net/21795bor/