JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div id="title">
    Just a title
    </div>
    </header>
    
    <main>
    Not important text
    
    <div id="q1">
    <div class="q1once">
    <a href="#btnq1"><button type="button" name="" value="" id="btnq1">Click to rotate</button></a>
    </div>
    </div>
    </main>

CSS

#q1{
    	height:100%;
    	}
    	
    .q1once{
    	width:20%;
    	height:15%;
    	position:absolute;
    	left:-50%;
    	animation-name:q1;
    	animation-delay:3s;
    	animation-iteration-count:1;
    	animation-duration:1.5s;
    	animation-fill-mode:forwards;
    	}
    	
    #btnq1:target{
    	animation-name:q1leave;
    	animation-iteration-count:1;
    	animation-duration:4s;    	
    	}
    
    @keyframes q1{
	50%{
		transform:translate(440%) scaleX(3);
		}
	100%{
		transform:translate(450%) scale(1.5,2);
		}
	}
    @keyframes q1leave{
    	0%{transform:rotate(0deg);
    		opacity:1;
    		}
    	100%{
    		opacity:0;
    		transform:rotate(360deg);
    		}
}