How can I enable CSS Transitions when switching between a fixed-top navbar and a fixed-bottom (w/ Bootstrap) [migrated]

How can I enable CSS Transitions when switching between a fixed-top navbar and a fixed-bottom (w/ Bootstrap) [migrated]

Okay, so I'm using Twitter Bootstrap and I have a "navbar navbar-fixed-top"; however, on some pages I want the navbar to be at the bottom. As a test, I've used jQuery to toggle the classes on click, like so:
function toggleMainNav() {
    $("#main-nav")
        .toggleClass("navbar-fixed-top")
        .toggleClass("navbar-fixed-bottom");
}
Which works fine, but of course, it's instant.
I would like it to transition between the two. However, I am not very experienced with CSS transitions and after a couple hours of Googling and reading and watching... I still can't get it to work.
Here's a CSS snippet
#main-nav {
    -webkit-transition: all 0.5s;
}
And if I do a test like this (to make sure I used the correct transition property)
#main-nav:hover {
    background-color: #55dd66;
}
It works fine.
(more info for those who don't use Bootstrap: navbar-fixed-top makes top:0 and bottom:auto and navbar-fixed-bottom does the opposite)
Thanks in advance.