I am working with bxslider and I'd like to have a different animation for the slide's text. 

While the slide slides to the left, I'd like the text box to be fixed in the middle and the text to fade in/out. 

Any ideas? I've been trying all day

Here is a pen: [Codepen](https://codepen.io/anon/pen/BPJJdO)

HTML: 

```
<div class="bxslider" id="banner">
  <div>
    <img src="img" />
    <h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
  </div>

  <div>
    <img src="img" />
    <h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
  </div>

  <div>
    <img src="img" />
    <h3 class="msl-title"><a href="#" title="Test Article">Test Article</a></h3>
  </div>

</div>

```

JS:

```
$(document).ready(function(){
  $('.bxslider').bxSlider();
});

```

CSS:

```
#banner .msl-title {
    width: 80%;
    max-width: 350px;
    top: 50%;
    background: white;
    padding: 40px;
    position: relative;
    margin: auto;
    overflow: auto;
    display: table;
    height: 160px;
    text-align: center;
    transform: translateY(-65%);
    border: 5px solid #61beb1;}

```