JSFiddle - React, Tailwind, and code Playground

by Ratiana Ma

HTML

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

CSS

.descriptionProd
{
    width:100px;
    height:100px
	position:absolute;
	top:50px;
	right:50px;
	color:white;
	font-size: 24px;
    background-color:blue;
}

.article
{
    width:100px;
        height:100px;
	position:absolute;
	top:100px;
	left:0px;
    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;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform:...

JavaScript

jQuery(function($){
	function majClass(element,classOrigin,classRemoved,classAdd)
	{
		element.addClass(classOrigin).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
			setTimeout(function(){
				element.removeClass(classRemoved).addClass(classAdd);
			},3000);    
		});       
	}
	
	function animation(){
		$('#Ipad').show();
		$('#descriptionProd').show();
		var $elmt = $('#Ipad');
		var $text = $('#descriptionProd');
		majClass($elmt,'fadeInLeftBig','fadeInLeftBig','fadeOutLeftBig');
		majClass($text,'fadeInRightBig','fadeInRightBig','fadeOutRightBig');
		setTimeout(function(){
			$text.removeClass('fadeOutRightBig');
			$elmt.removeClass('fadeOutLeftBig');
			$text.hide();
			$elmt.hide();
			$text = $('#descriptionProd2');
			$elmt = $('#ipadBlack');
			$text.show();
			$elmt.show();
			majClass($text,'fadeInRightBig','fadeInRightBig','fadeOutRightBig');
			majClass($elmt,'fadeInLeftBig','fadeInLeftBig','fadeOutLeftBig');
		},6000);
	}
	
	//Animation
	$('#descriptionProd2').hide();
	$('#ipadBlack').hide();
	$('#Ipad').hide();
	$('#descriptionProd').hide();
	//animation en boucle 
	setInterval(animation,10000);
	}