How to make animated text-decoration underline on hover

I was able to apply background-image to anchor on :hover and now want it to be animated at the same time. How can I possible achieve that?

.nav-content ul li a {
    display: inline-block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
}

.nav-content ul li a:hover {
    text-decoration: none;
    background: url('dotted.gif') bottom repeat-x;
}

Clarifying my question:

What I am trying to achieve is that the underline dotted.gif image to be animated on the X axis continuously on hover. So far it just appears on hover