<div class="container">
<h1 class="fadeInOut">Fade In Out</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;
}
@keyframes fadeInOutAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fadeInOut {
cursor: pointer;
opaacity:0;
animation: fadeInOutAnimation 1.5s infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.