Css transitions - animation does not work properly at startup

Question

I created an animation to control two buttonsto move vertically a div,
using the jquery click, but the problem is that the animation does not work properly when running.

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 do not provide the initial state for the transition. Add this to your CSS .black-divselector ...

top: 0;

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