You need not use keyframes for this simple animation. Just CSS transition is enough.
Set the transition property in the initial state style rules with the duration.
Edit: I just noticed that there is a flicker at the bottom, it can be removed by setting the styles on the icon and hover on the parent.
#arrow i {
position: relative;
top: 0;
transition: top ease 0.5s;
}
#arrow:hover i {
top: -10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
<a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>