css transitions - animation doesn't work properly at start

Question

I maked an animation controlled by two buttons for move vertically a div,
using jquery click, but the problem is that the animation doesn't work properly at start..

CSS

.black-div {
    width: 100%;
    height: 120px;
    background-color: black;
    position: absolute;
    transition: top 1s 0s cubic-bezier(0, 0, 1, 1);
}

JS

$(".button-up").click(function(){
        $(".black-div").css({"top":"0px"});
});

$(".button-down").click(function(){
        $(".black-div").css({"top":"300px"});
});

see: http://jsfiddle.net/B6t2D/

Answer 1

You aren't providing an initial state to transition from. Add this to your CSS .black-div selector...

top: 0;

Fiddle - http://jsfiddle.net/B6t2D/3/