How do I do this animated underline hover effect?

Question

Can anyone help me work out how this cool animated underline hover effect is done on this site? I have tried to replicate it myself but have not succeeded. here is my jsbin

Answer 1

When you are hover the a href you need to write css and animation function for that you here you can refer my code

a{
  text-decoration:none;
}
a:hover {
    border-bottom: 1px solid;
    -webkit-animation: border-hover .6s infinite ease-in-out !important;
    animation: border-hover .6s infinite ease-in-out !important
}

@-webkit-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@-moz-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@-o-keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

@keyframes border-hover {
    0%,
    100% {
        border-bottom-style: dotted
    }
    25%,
    50% {
        border-bottom-style: dashed
    }
    75% {
        border-bottom-style: solid
    }
}

<a href="#" class"link">Link goes here</a>