JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	
	<div>
		<img src="airplane.png" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, delectus?</p>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>

CSS

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
div {
  width: 300px;
  margin: 300px auto;
  text-align: center;
 /*  animation: lightSpeedIn 3s linear infinite ; */
}

JavaScript

$(document).ready(function () {
	
	if ( $(window).width() >= 1200 ) {
		$(window).scroll(function() {
		var scrollPage = $('body').scrollTop();
		if ( scrollPage > 100) { 
			$('div').css({
				animation: 'lightSpeedIn 2s linear 1'
		});
			
		} else {
			$('div').css({
				animation: 'none'
		});
		}	
	});
	}
});