Button animation does not happen

Question

When I clicked on the button it was supposed to go left for 400ms but when I click it goes straight without the animation, it "jumps" straight to the final place without going through the rest.

CSS:

#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;

}

JS with Jquery:

$("#btn-menu").on("click", function(){
        $('#icone-menu').toggleClass('icone-menu-animacao', 400);
    }); 

HTML:

<a href="#" id="btn-menu">
<img src="img/menu55.png" id="icone-menu">
</a>

New CSS:

#icone-menu{
    position: block;
     left:0;
     transition: 0.2s;   
}
#icone-menu.icone-menu-animacao{
    left: -10px;
    position: relative;
    transition: 0.2s;
}

Answer 1

Your CSS has to have transition and a "default state", here is an example in jsFiddle.net;
Plus, the ,400 on the line $('#icone-menu').toggleClass('icone-menu-animacao', 400); is not necessary since the toggleClass only takes one argument

Answer 2

CSS transitions happen due to property transition, without it the changes of properties of the elements will happen "abruptly". To make any exchange (as long as Transition affects these) of elements you can use this property. It controls transition time, type of transition and many other things.

That way, to make an element have an animation, you can simply use jQuery to put (or take) a class that will change the properties of that element, from now on, to transition will animate this exchange. Example:

$('#block').click(function() {
    $(this).toggleClass('mover');
});

#block {
    width:50px;
    height:50px;
    background-color:blue;
    position:relative;
    left:0;
    transition:left .5s linear;
}

#block.mover {
    left:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>

And a detail, you used a second parameter in the command toggleClass in your question. This is not wrong, but this second parameter only works if you are using jQuery UI.