JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<button>start</button>
<div id="e">
  <div id="transDiv">
  <img id="f1" src="./chrome.png"  width="100" height="100" alt="" />
  <img id="iron" src="./ironmaiden.png" width="75" height="75" alt="" />
  <img id="youtube2"  src="./chrome.png" width="100" height="100" alt="" />
  <img id="cristine"  src="./inspector-toolbar.png" width="600" height="124" alt="Cristina branco" />
  </div>
</div>

CSS

#e {
	position: absolute;
	background-color: #ddd;
  border: 1px solid black;
  left: 5px;
  top: 100px;
  width: 450px;
  height: 250px;
  overflow: hidden;
}

#e img {
  position: absolute;
}

#f1 {
	left: 18.6px;
}

#iron {
	left: 451.8px;
  top: 12.5px;
}

#youtube2 {
  left: 18.6px;
  top: 120.66px;
  -webkit-transform: rotate(-300deg);
  -moz-transform: rotate(-300deg);
  -o-transform: rotate(-300deg);
  -ms-transform: rotate(-300deg);
  transform: rotate(-300deg);
}

#cristine {
  margin-left: 50px;
  margin-right: 50px;
  left: 139.3px;
  top: 108.6px;
}

#transDiv.go {
  -webkit-animation: movie 5s linear;
}

@-webkit-keyframes movie {
    0%   { -webkit-transform: translate(0px,0px) scale(2); }
    100%  { -webkit-transform: translate(-200px,-100px) rotate(4deg); }
}

JavaScript

$("button").click(function() {
  $("#transDiv").addClass("go");
});