Jak osiągnąć "smukłe" wykańczanie animacji?

Chciałbym żeby element zaczął podskakiwać jak na niego najadę.

bum.

done.

            @-webkit-keyframes bumpingTop {
                from { top: -50px; }
                to { top: -60px; }
            }
            @-webkit-keyframes bumpingBottom {
                from { bottom: -50px; }
                to { bottom: -60px; }
            }            

            .timeline .entry {
                position: absolute;
                background-color: #ccccff;
                border-color: #ccccff;
                padding: 10px;
                cursor: pointer;
                -webkit-animation-duration: .3s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: alternate;
                -webkit-animation-timing-function: ease-out;
            }
            .entry.bottom {  -webkit-animation-timing-function: ease-in;     }

            .entry.top    { top: -50px; }
            .entry.bottom { bottom: -50px; }
            
            .entry.top:hover    {-webkit-animation-name: bumpingTop; }
            .entry.bottom:hover {-webkit-animation-name: bumpingBottom; }

Wszystko gra, tylko jak teraz opuszczę myszkę z tego elementu to on nie "wsuwa się" (przez np 300ms) na swoje miejsce tylko wskakuje od razu.

Pomyślałem że dodam do .timeline .entry

    -webkit-transition: top .3s, bottom .3s;

Ale to nie przynosi rezultatu.

Co począć?

Ps; Jestem gotów przyjąć rozwiązanie z innym podejściem boo na razie mogę go przerabiać do woli. Wolałbym jednak nie korzystać z js (if possible).