JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trans">
    <h1>HUE BR</h1>
    <h1>HUE BR</h1>
    <h1>HUE BR</h1>
    <h1>HUE BR</h1>    
</div>

CSS

.trans {
	background: #F00;
	-webkit-transition: opacity .25s 1s ease-in-out;
	-moz-transition: opacity .25s 1s ease-in-out;
	-ms-transition: opacity .25s 1s ease-in-out;
	-o-transition: opacity .25s 1s ease-in-out;
	transition: opacity .25s 1s ease-in-out;

	-webkit-transition: height 1.25s ease-in-out;
	-moz-transition: height 1.25s ease-in-out;
	-ms-transition: height 1.25s ease-in-out;
	-o-transition: height 1.25s ease-in-out;
}

.trans:hover {
	height: 10px;
	opacity: .5;
}