Rotation d'une image dans une carte

Bonjour,

Voila je rencontre un petit problème avec mon code.
je voudrais faire une rotation sur deux images d'un même bloc.
voici le code HTML

<div class="item-0">
            <div class="views-field views-field-field-image">
                <div class="field-content im_100pr100_w rotate-img">
                    <img typeof="foaf:Image" src="" class="lazyOwl">
                    <img typeof="foaf:Image" src="" class="lazyOwl">
                </div>
            </div>
            <div class="views-field views-field-title col-pad-top-20">
                <h2 class="field-content text-center ">EXPOSITION</h2>
            </div>
            <div class="views-field views-field-field-teste-1">
                <div class="field-content texteSmall    texteSmall   col-pad-bottom-10  text-left col-pad-top-10 col-pad-right-10 col-pad-left-10">
                    <p><strong>Nicamex 2016</strong>, est le point d’accès d’affaires le plus important de son genre,entre le Nigeria et le Cameroun, où de nouvelles relations seront formées, les projets discutés et les transactions effectuées pour développer votre entreprise au delà de la frontière...&nbsp;</p>
                </div>
            </div>
        </div>      

et ici le code css

.item-0 {
    width: 270px;
    height: 350px;
    margin: 2% auto;
    position: relative;
/*    background-color: lightyellow;*/
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all ease 1s;
    box-shadow: 0px 3px 0px lightgreen;
    display: flex;
    flex-direction: column;
}
.rotate-img {
    position: absolute;
}
.im_100pr100_w, .im_100pr100_w img {
    width: 100% !important;
    height: auto;
    position: absolute;
    top: 0;
}
.views-field-field-image{
    position: relative;
    animation: flip 5s linear infinite;
}
.views-field-title{
    position: absolute;
    top: 35%;
    bottom: 35%;
    right: 0;
    left: 0;
}
.views-field-field-teste-1{
    position: absolute;
    bottom: 0px;
}
.col-pad-top-20 {
    padding-top: 20px;
}
.text-center {
    text-align: center;
    font-family: Bebas Neue;
}
.col-pad-left-10 {
    padding-left: 10px;
}
.col-pad-bottom-10 {
    padding-bottom: 10px;
}
.col-pad-right-10 {
    padding-right: 10px;
}
.col-pad-top-10 {
    padding-top: 10px;
}
.texteSmall {
    font-size: 13px;
    font-family: roboto light;
}
.text-left {
    text-align: left;
}
@keyframes flip {
    100%{
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

je veux que ces images alternent à intervalle de te mps
je ne sais pas si j'explique bien mon probleme
je voudrais le faire en JS mais je sais vraiment pas par où commencer