Quando faço tudo corretamente (inclusive já copiei e colei o codigo para ver se funciona) a animação funciona corretamente no HTML preview do Atom, mas quando abro no Chrome o banner não se meche por nada.
como resolvo isso?
Java
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function(){
$('.topCasaFina-banner').css('transform', 'translate(-50%, 10%)');
});
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function(){
$('.topCasaFina-banner').css('transform', 'translate(-50%, -50%)');
});;
Trecho do CSS
.topcasafina-banner {
color: #FFF;
background-color: rgba(0, 0, 0, .5);
padding: 20px;
width: 70%;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
text-align: justify;
transition: 0.3s;
}