How to add transition time to underline hover effect

Question

Okay , what i am asking is really lame ( i know a lot of css ) but here is my problem - i have some text which i want to get an underline on hover , but the underline appears on hover without a delay please help here is my code -

#full{
top: 0px;
left: 0px;
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease;
}

    #full > #header{
        top: 0px;
        width: 100%;
        height: 50px;
        background: #e25959;
        position: fixed;
        -webkit-transition: all 0.5s ease;
    }
    #full > #header > .link{
        position: relative;
        float: right;
        color: #fff;
        margin: 15px;
        -webkit-transition: all 0.5s ease;
    }
    #full > #header > .link:hover{
        border-bottom: 1px solid #fff;
        cursor: default;
    }

and my html -

<div id="full">
    <div id="header">
        <div class="link">MY WORK</div>
        <div class="link">ABOUT ME</div>
        <div class="link">HOME</div>
    </div>
</div>

Answer 1

Try initially setting the border-bottom to transparent:

#full > #header > .link{
    position: relative;
    float: right;
    color: #fff;
    margin: 15px;
    -webkit-transition: all 0.5s ease;
    border-bottom: 1px solid transparent;  /* <------ */
}

Here's an example, http://jsfiddle.net/wf3fc/3/

Answer 2

Do this:

#full > #header > .link {
    position: relative;
    float: right;
    color: #fff;
    margin: 15px;
    border-bottom: 1px solid rgba(0,0,0,0);
    -webkit-transition: all 0.5s ease 0s;
}
#full > #header > .link:hover {
    border-bottom-color: #fff;
    cursor: default;
}