animation effect using keyframes

i wanna make an animation effect for slider background image like revolution slider using css3 keyframes, i will attach the example for the website which has the same effect , and the codes i am working on`This is link of the same slider background effect

.item{
  height: 80vh;
   text-align: center;
   color: #fff;
  }

 <section id="mainSlider">
                <div id="owl-main" class="owl-carousel height-md owl-inner-nav owl-ui-lg">                     
                    <div class="item" style="background-image: url(http://demo.fuviz.com/reen/v1-5/assets/images/art/slider01.jpg)">
                        <div class="inner-item">
                            <div class="caption vertical-center text-center">   
                                <h1 class="fadeInDown-1 light-color">قيلت فوق</h1>
                                <div class="fadeInRight-2 medium-color">
                                  <div class="details">
                                      <div class="date">
                                          <i class="fa fa-calendar"></i> من 1-1-2001  الى  2-2-2002
                                      </div>
                                  </div>
                                <div class="details">
                                      <div class="date">
                                         <i class="fa fa-clock-o"></i>من الساعة 1.00am الى الساعة 2.00 am
                                      </div>
                                </div>
                                </div>
                                <div class="fadeInDown-3">
                                    <a href="#" class="btn btn-md">التفاصيل</a>
                                </div><!-- /.fadeIn -->     
                            </div><!-- /.caption -->
                        </div>
                    </div><!-- /.item -->      
                </div><!-- /.owl-carousel -->
            </section>

`