<div class="owata">
  (^<span class="month">o</span>^)
  <span class="serif">オワタ</span>
</div>
.owata {
  font-size: 50px;
  backgound: #eee;
  color: raba(50, 50, 50, 1);
  margin: 1em auto;
  width: 5em;
  position: relative;
}

/* left-hand */
.owata:before {
  content: "\";
  position: absolute;
  left: -1em;
  animation: hand-anime 2s steps(2, end) infinite;
  -webkit-animation: hand-anime 2s steps(2, end) infinite;
}

/* right-hand */
.owata:after {
  content: "/";
  position: absolute;
  right: 2em;
  animation: hand-anime 2s steps(2, end) infinite;
  -webkit-animation: hand-anime 2s steps(2, end) infinite;
}
@keyframes hand-anime {
   0%, 49% {
    transform: rotate(0deg);
  }
  50%, 100% {
    transform: rotate(90deg);
  }
}
@-webkit-keyframes hand-anime {
  0%, 49% {
    transform: rotate(0deg);
  }
  50%, 100% {
    transform: rotate(90deg);
  }
}

/* serif */
.owata > span.serif {
  color: #333;
  opacity: 0;
  position: absolute;
  right: 0.2em;
  animation: serif 2s steps(2, end) infinite; 
  -webkit-animation: serif 2s steps(2, end) infinite; 
}
@keyframes serif {
  0%, 49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes serif {
  0%, 49% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

/*month*/
.owata > span.month {
  position: relative;
  animation: month-fade-out 2s steps(1, end) infinite; 
  -webkit-animation: month-fade-out 2s steps(1, end) infinite;
}
@keyframes month-fade-out {
  50%, 100% {
    color: rgba(50, 50, 50, 0);
  }
}
@-webkit-keyframes month-fade-out {
  50%, 100% {
    color: rgba(50, 50, 50, 0);
  }
}

.owata > span.month:after {
  content: "O";
  color: rgba(50, 50, 50, 0);
  position: absolute;
  left: -0.1em;
  animation: month-fade-in 2s steps(1, end) infinite; 
  -webkit-animation: month-fade-in 2s steps(1, end) infinite;
}
@keyframes month-fade-in {
  50%, 100% {
    color: rgba(50, 50, 50, 1.0);
  }
}
@-webkit-keyframes month-fade-in {
  50%, 100% {
    color: rgba(50, 50, 50, 1.0);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.