JSFiddle - React, Tailwind, and code Playground

by Jonathan Nascimento

HTML

<div class="container">

	<div class="imagem">
		   <p>Oi</p>
  </div>
 
</div>

CSS

* {
		margin: 0;	
	}
	
	.container {
		height: 2000px;
		margin: 0;	
	}
	
	p {
		text-align: center;	
	}
	
	.imagem {
		width: 200px;
		height: 30px;
		background-color: red;
		position: fixed;
		margin-top: 300px;
		margin-left: -150px;;
	}
	
	
	.imagem:hover {
		width: 200px;
		height: 30px;
		background-color: red;
		animation-duration: 99s;
		animation-name: imagem;
		position: fixed;
		margin-top: 300px;
		margin-left: -150px;
		
	}


@keyframes imagem {
    0%   {top: 0px; left: 0px;}
    1%  {top: 0px; left: 150px;}
	100% {top: 0px; left: 150px;}
	

 }