<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.