JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="sheep sheep_left"></div>
<div class="sheep sheep_right"></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="go">go</button>

CSS

body {
	background-color: #336699;
}

@-webkit-keyframes fuck-left {
	0% {
		background-image: url("http://cdn.weblab.pro/Dy9Igkee.png");
	}
	100% {
		background-image: url("http://cdn.weblab.pro/sMx1LB3r.png");
	}
}

@keyframes fuck-left {
	0% {
		background-image: url("http://cdn.weblab.pro/Dy9Igkee.png");
	}
	100% {
		background-image: url("http://cdn.weblab.pro/sMx1LB3r.png");
	}
}

@-webkit-keyframes fuck-right {
	0% {
		background-image: url("http://cdn.weblab.pro/aPA8Uk9Z.png");
	}
	50% {
		background-image: url("http://cdn.weblab.pro/RksLTLet.png");
	}
	100% {
		background-image: url("http://cdn.weblab.pro/CsFN2A4Q.png");
	}
}


.sheep {
	position: absolute;
	text-align: center;
	color: #fff;
	background-repeat: no-repeat;
}

.sheep_left {
	width: 96px;
	height: 69px;
	left: 0;
	top: 35px;
	background-image: url("http://cdn.weblab.pro/Rcaic0fb.png");
	-webkit-transition: left 3s ease-in;
	-moz-transition: left 3s ease-in;
	-ms-transition: left 3s ease-in;
	-o-transition: left 3s ease-in;
	transition: left 3s ease-in;
}

.sheep_right {
	background-image: url("http://cdn.weblab.pro/cezkJvf6.png");
	width: 84px;
	height: 97px;
	left: 400px;
}

.sheep_left-moved {
	left: 455px;
}
.sheep_right-moved {}

.sheep_left-animated {
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	-webkit-animation: fuck-left 0.1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
	animation: fuck-left 0.1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}
.sheep_right-animated {
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	-webkit-animation: fuck-right 0.1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
	animation: fuck-right 0.1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

JavaScript

$(function () {
    var left = $(".sheep_left");
    var right = $(".sheep_right");
    $("#go").on("click", function (e) {
        left.addClass("sheep_left-moved");
        right.addClass("sheep_right-moved");
        
        window.setTimeout(function() {
            left.addClass("sheep_left-animated");
            right.addClass("sheep_right-animated");
        }, 3000);
    });
});