hover css animation

HTML

<div id="parent">Hover on me...
    <div id="myDiv">Hello!</div>
</div>

CSS

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    100% {
        opacity: 0.5;
    }
    }
}
#myDiv {
    opacity: 0;
    padding: 5px;
    color: #600;
    background-color: #CEC;
}
#parent {
    background-color: #000;
    color: #FFF;
    width: 500px;
    height: 500px;
    padding: 5px;
}
#parent:hover #myDiv {
    -webkit-animation: fadeAnimation 6s;
}