<div class="container">
<h1 class="fadeIn">Fade In</h1>
</div
body{
display:flex;
justify-content: center;
background-color:#eee;
font-family: 'peacock';
align-items:center;
flex-direction: column;
}
h1{
font-size:30vh;
}
.container{
border:1px solid #bbb;
padding:1rem 3rem;
}
.fadeIn {
opacity: 0;
transform: translate3d(0, 20px, 0);
cursor: pointer;
transition: 0.25s all ease-in-out;
}
.fadeIn:hover {
opacity: 1;
transform: translate3d(0, 0, 0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.