JSFiddle - React, Tailwind, and code Playground

HTML

<section id="kostka">
<div id="s1"class="kk"></div>
</section>

CSS

#kostka
{	
	width:50%;
	height:50%;
	position: absolute;
	background:red;
	}
#kostka:hover #s1
{	
	top:19.5%;
	left:40.97674419%;
    position: absolute;
    animation: neexistuje 8s;
    -webkit-animation: neexistuje 8s;
}

.kk
{	
	background:#fff;
	opacity: 89%;
	background:#fff;
	position: absolute;
	-webkit-transform: translate(-50%,-50%);
	transform: translateX(-50%,-50%);

}

#s1
{    width:16px;
	height:16px;
	top:4.5%;
	left:31.97674419%;
	-webkit-animation: testt 8s;
	animation: testt 8s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	transition:top 1s, left 1s;
	-webkit-transition:top 1s, left 1s; /* Safari */
}


@keyframes testt
{
0% { margin-left:22.5%;}
10% { margin:-5% 0 0 17%;}
20% { margin:3 0 0  19%; transform: rotate(35deg);
	-ms-transform: rotate(35deg); /* IE 9 */
	-webkit-transform: rotate(35deg); /* Safari and Chrome */}
30% { margin:-3% 0 0  13%;}
50% { margin:0% 0 0  12%;}
60% { margin:-3% 0 0  8%; transform: rotate(270deg);
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Safari and Chrome */}
85% { margin:2% 0 0 14%;}
100% { 	margin-left:22.5%;}
}

@-webkit-keyframes testt /* Safari and Chrome */
{
0% {}
10% { margin:-5% 0 0 17%;	
}
20% { margin:3 0 0  19%; transform: rotate(35deg);
	-ms-transform: rotate(35deg); /* IE 9 */
	-webkit-transform: rotate(35deg); /* Safari and Chrome */}
30% { margin:-3% 0 0  13%;}
50% { margin:0% 0 0  12%;}
60% { margin:-3% 0 0  8%; transform: rotate(270deg);
	-ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Safari and Chrome */}
85% { margin:2% 0 0 14%;}
100% { }
}