JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rootdroid.zz.mu/js/script.js"></script>
<div id="an-anim" style="width:100%;"><ol>
<li id="an-scene-0">
<div class="an-stage" style="margin:100px auto;">
<div id="an-obj-1"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div>
<div id="an-obj-2"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-3"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-4"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-5"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-6"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-7"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-8"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-9"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
</div>
<div id="an-obj-10"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div>
<div id="an-obj-11"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-12"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-13"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-14"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div id="an-obj-15"><div><img height="616" width="524" src="http://rootdroid.zz.mu/images/assets/tree.png"></div></div>
<div...
CSS
#an-anim > ol {
list-style: none;
}
#an-anim > ol > li {
margin: 0;
padding: 0;
display: none;
}
#an-anim > ol > li.run {
display: block;
}
#an-anim .an-stage {
overflow: hidden;
margin: 0;
padding: 0;
}
#an-anim .an-stage div {
position: absolute;
}
.an-stage * {
margin: 0;
padding: 0;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
#an-anim .an-stage img {
position: absolute;
top: 0;
left: 0;
}
#an-anim .AN-Scene-Description {
display: none;
}
#an-anim iframe {
border: none;
height: 100%;
width: 100%
}
#an-anim .an-stage {
position: relative;
}
#an-anim {
display: inline-block;
}
#an-obj-1 {
-moz-transform: translate(-270px, -322px) scale(0.25, 0.25);
transform: translate3d(-270px, -322px, 0px) scale3d(0.25, 0.25, 1);
-webkit-transform: translate3d(-270px, -322px, 0px) scale3d(0.25, 0.25, 1);
width: 524px;
height: 561px;
top: 0;
left: 0;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes ani-an-obj-1-0 {
0% {
-webkit-transform: translate3d(-197px, -281px, 0px) scale3d(0.25, 0.25, 1);
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(-978px, -280px, 0px) scale3d(0.25, 0.25, 1);
-webkit-animation-timing-function: linear;
}
}
@keyframes ani-an-obj-1-0 {
0% {
transform: translate3d(-197px, -281px, 0px) scale3d(0.25, 0.25, 1);
animation-timing-function: linear;
}
100% {
transform: translate3d(-978px, -280px, 0px) scale3d(0.25, 0.25, 1);
animation-timing-function: linear;
}
}
@-moz-keyframes ani-an-obj-1-0 {
0% {
-moz-transform: translate(-197px, -281px) scale(0.25, 0.25);
-moz-animation-timing-function: linear;
}
100% {
...