<p class="blick01">blink 01</p>
<p class="blick02">blink 02</p>
body {
  margin: 2em;
}
p {
  margin: 1.5em;
  text-align: center;
}
p:hover {
  animation-play-state: paused;
}
.blick01 {
  animation: blink01 .5s linear infinite alternate;
}
.blick02 {
  animation: blink02 1s linear infinite alternate;
}
@keyframes blink01 {
  0%, 50% {
    opacity: 0;
  }
  50.1%, 100% {
    opacity: 1;
  }
}
@keyframes blink02 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.