JSFiddle - React, Tailwind, and code Playground

HTML

<div alt="article" class="article" id="Ipad">article1</div>
		<div id="descriptionProd" class="descriptionProd">article1bis
			</div>
    <div alt="article" class="article  id="ipadBlack">article2</div>
		<div id="descriptionProd2" class="descriptionProd">article2bis
		</div>

CSS

body {
    text-align: center;
    overflow: hidden;
}

.article, .descriptionProd {
    display: none;
    margin: auto;
}
.article.animated, .descriptionProd.animated {
    display: block;
}

.descriptionProd
{
    width:100px;
    height:100px
	color:white;
	font-size: 24px;
    background-color:blue;
}

.article
{
    width:100px;
    height:100px;
    background-color:red;
}

.animated {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
         ...

JavaScript

jQuery(function($){
	var articles = $(".article");

	function loop(currentArticle){
		articles.eq(currentArticle).removeClass("fadeOutLeftBig").addClass("animated fadeInLeftBig")
			.next(".descriptionProd").removeClass("fadeOutRightBig").addClass("animated fadeInRightBig");
		setTimeout(function(){
			//cache l'article précédent
			articles.eq(currentArticle).removeClass("fadeInLeftBig").addClass("fadeOutLeftBig")
				.next(".descriptionProd").removeClass("fadeInRightBig").addClass("fadeOutRightBig")
				.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){
					articles.eq(currentArticle).removeClass("animated")
						.next(".descriptionProd").removeClass("animated");
					loop( (currentArticle+1) % articles.length ); //affiche le suivant
				});			
		}, 3000);   
	}
	
	loop(0); //affiche le premier article
});