JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div class="clase-1">
          <div class="clase-2">
          </div>
        </div>

CSS

@-webkit-keyframes animacion
{
	0%   {-webkit-transform:translate(0px,0px);}
	25%  {-webkit-transform:translate(0px,150px);}
	50%  {-webkit-transform:translate(150px,150px);}
	75%  {-webkit-transform:translate(150px,0px);}
	100% {-webkit-transform:translate(0px,0px);}
}

.clase-1 {
	position:relative;
	top:0;
	left:0;
	width:250px;
	height:250px;
	background-color:lightblue;
}

.clase-2 {
	position:relative;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background-color:navy;
}
.clase-1:hover div.clase-2 {	
	-webkit-animation-name:animacion;
	-webkit-animation-duration:5s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease-in-out;
}