jQuery Cycle2 + animate.css Caption Transitions

Applying animate.css to jquery.cycle2

HTML

<script src="http://surgd.com/cycle2/jquery.easing.1.3.js"></script>
<script src="http://surgd.com/cycle2/jquery.cycle2.all.js"></script>
<link rel="stylesheet" href="http://surgd.com/cycle2/animate.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="http://surgd.com/cycle2/min-styles.css">
<div class="cycle-slideshow" 
  data-cycle-caption-plugin='caption2' 
  data-cycle-slides="li" 
  data-cycle-fx='scrollHorz' 
  data-cycle-speed='700' 
  data-cycle-timeout='7000' 
  data-cycle-pause-on-hover="true" 
  data-cycle-prev=".prev" 
  data-cycle-next=".next"     
  data-cycle-overlay-template="<div class=banner-background style=background-image:url(http://malsup.github.io/images/{{background}})></div>" 
data-cycle-caption-template="<span class=caption1>{{caption1}}</span> <span class=caption2>{{caption2}}</span> <span class=caption3>{{caption3}}</span> <span class=caption4>BUTTON</span> <span class=twitter></span> <span class=facebook></span> <span class=linkedin></span>" 
  data-cycle-easing="easeOutBack"
>
    <ul>
        <li data-cycle-background="p1.jpg" data-cycle-caption1="This is Slide 1 Caption 1" data-cycle-caption2="This is Slide 1 Caption 2" data-cycle-caption3="This is Slide 1 Caption 3" data-cycle-caption4="BUTTON"></li>
        <li data-cycle-background="p2.jpg" data-cycle-caption1="This is Slide 2 Caption 1" data-cycle-caption2="This is Slide 2 Caption 2" data-cycle-caption3="This is Slide 2 Caption 3" data-cycle-caption4="BUTTON"></li>
                <li data-cycle-background="p3.jpg" data-cycle-caption1="This is Slide 2 Caption 1" data-cycle-caption2="This is Slide 3 Caption 2" data-cycle-caption3="This is Slide 3 Caption 3" data-cycle-caption4="BUTTON"></li>
    </ul>
    <div class="prev"></div>
    <div class="next"></div>
    <div class="cycle-overlay"></div>
    <div class="cycle-caption"></div>
    <div class="cycle-pager"></div>
    <div...

CSS

.shadow {
    width:100%;
    max-width:900px;
    height:60px;
    background-image: url(http://surgd.com/cycle2/shadow2.png);
    background-position:center top;
    margin:0 auto;
}
.about {
    font-size:16px;
    color:#333;
    text-align:center;
    width:100%;
}
/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px !important; height: 16px !important; 
    display: inline-block; color: rgba(0,0,0,0.4); cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: rgba(0,0,0,1);}
.cycle-pager > * { cursor: pointer;}


.cycle-overlay {
    position:absolute;
    bottom:auto;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    background:#333;
    padding:0;
    opacity:1
}
.banner-background {
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
.cycle-slideshow {
    width:100%;
    height:400px;
    background-position:center;
    background-size:cover;
    color:#fff;
    overflow:hidden;
}
.cycle-slideshow ul, .cycle-slideshow li {
    width:100%;
    height:100%;
    overflow:hidden;
}
img {
    width:100%;
    min-width:100%;
    min-height:100%;
}
.cycle-caption {
    width:100%;
    height:100%;
    padding:20px;
    position:absolute;
    top:0;
    left:0;
    z-index:20;
    opacity:1;
}
.caption1 {
    font-weight:bold;
    color:#FFF;
    background: rgba(0, 0, 0, 0.3);
    font-size:27px;
    position:absolute;
    top:20px;
    left:20px;
    z-index:30;
    padding:5px;
    -moz-animation: fadeInRight 0.8s ease-in 1.3s backwards;
    -webkit-animation: fadeInRight 0.8s ease-in 1s backwards;
    animation: fadeInRight 0.8s ease-in 1s backwards;
    opacity: 1;
}
.caption2 {
    font-weight:bold;
    color:#FFF;
    background: rgba(0, 0, 0, 0.3);
   ...

JavaScript

$('.cycle-slideshow').on('cycle-before', function (opts) {
    var slideshow = $(this);
    var img = slideshow.find('.banner-background').css('background-image');
    slideshow.css('background-image', img);
});

var progress = $('#progress'),
    slideshow = $( '.cycle-slideshow' );

slideshow.on( 'cycle-initialized cycle-before', function( e, opts ) {
    progress.stop(true).css( 'width', 0 );
});

slideshow.on( 'cycle-initialized cycle-after', function( e, opts ) {
    if ( ! slideshow.is('.cycle-paused') )
        progress.animate({ width: '100%' }, opts.timeout, 'linear' );
});

slideshow.on( 'cycle-paused', function( e, opts ) {
   progress.stop(); 
});

slideshow.on( 'cycle-resumed', function( e, opts, timeoutRemaining ) {
    progress.animate({ width: '100%' }, timeoutRemaining, 'linear' );
});