Add css transition in div on Flexslider

I have a flexslider in a Project, in it I have the background image and inside a div with description and button for external link. What I need to do is that with each slide change, this div has a transition, as if it were to give left 0 and up to 3 seconds to give left 400 for example or something with opacity. Has anyone ever had to do some similar animation inside Flexslider?

Below is code:

<div class="flexslider">
        <ul class="slides">
            <li ng-repeat="banner in vm.bannerPublicidade" style="background-image: url({{vm.url_upload}}publicidade_{{vm.hashUpload}}/{{banner.imagem_publicidade}});" repeat-end="vm.slider()">
                <div class="centralize__website">
                    <div class="center_description-Slider">
                        <div class="row">
                            <div class="cell">
                                <h2>
                                    {{banner.titulo_publicidade}}
                                </h2>
                                <p ng-bind-html="banner.lead_publicidade | trustAs"></p>
                                <a href="{{i.link}}" target="_blank">
                                    <md-button class="md-raised md-primary">Conheça</md-button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </li>
        </ul>
        <div class="buttonsSlider">
            <div class="centralize__website">
                <a ng-click="vm.scrollTo('hospitality_section')">
                    <md-button class="md-raised md-primary transparentButton">HOTELARIA</md-button>
                </a>
                <a ng-click="vm.scrollTo('tourism_section')">
                    <md-button class="md-raised md-primary transparentButton">TURISMO</md-button>
                </a>
            </div>
            <hr>
            <hr class="rightLine"> 
        </div>
    </div>

Javascript to enable slider:

        vm.slider = function () {
        setTimeout(function () {
            $('.flexslider').flexslider({
                animation: "fade",
                controlNav: false,
                directionNav: false
            });
        }, 1);
    }

The div I need from the effect, is with the center_description-Slider class, inside it is where all the content quoted is located.

Something similar to this slider .

If possible, recommending Sliders with this function already implemented would also make it easier.