JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<hgroup class="sitename">
  <h2>
    <a href="http://www.old-pine.net/" title="ホーム">
      <div class="ripple site-name-anime">古松 | 情報システムにプロのサポート</div>
    </a>
  </h2>
</hgroup>

CSS

.sitename a {
  color: #222;
  text-decoration: none;
}

.sitename {
  height: 24px;
}

.sitename:before {
  content: '';
  position: absolute;
  background-color: #f44;
  visibility: hidden;
  z-index: -1;
  background-image: -webkit-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
  background-image: -moz-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
  background-image: -o-linear-gradient( left, rgba( 243, 245, 246, 1) 25%, rgba( 255, 255, 255, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
  background-image: linear-gradient(to right, rgba( 243, 245, 246, 1) 25%, rgba( 255, 0, 0, 0.1) 50%, rgba( 243, 245, 246, 1) 75%);
  color: white;
  height: 24px;
  width: 10%;
  -webkit-animation: 3s ease-out 0s infinite normal move_eye;
  -moz-animation: 3s ease-out 0s infinite normal move_eye;
  -o-animation: 3s ease-out 0s infinite normal move_eye;
  animation: 3s ease-out 0s infinite normal move_eye;
}

@-webkit-keyframes move_eye {
  from {
    margin-left: -20%;
    visibility: visible;
  }
  to {
    margin-left: 100%;
    background-color: #fff;
  }
}

@-moz-keyframes move_eye {
  from {
    margin-left: -20%;
    visibility: visible;
  }
  to {
    margin-left: 100%;
    background-color: #fff;
  }
}

@-o-keyframes move_eye {
  from {
    margin-left: -20%;
    visibility: visible;
  }
  to {
    margin-left: 100%;
    background-color: #fff;
  }
}

@keyframes move_eye {
  from {
    margin-left: -20%;
    visibility: visible;
  }
  to {
    margin-left: 100%;
    background-color: #fff;
  }
}