タイトルのCSSスキャン動画効果

やりたいこと：ページタイトルのスキャン動画効果

• ページがロード後に、タイトルが一度スキャンのような動画効果を実現したいです。
• CSSのAnimation効果だけを利用したいです
• javascript、ｊQueryなどを使用しないこと

​考え方：タイトルのレイヤーの下に、スキャン動画レイヤーを追加

• タイトルのレイヤーを上に設定します
• タイトル要素（DIV）の疑似クラス（before）を利用して、スキャンのレイヤーを作成します
  • position: absolute
  • z-index:-1
  • backgroundにlinear-gradientの使用
  • animationで padding-left の効果でスキャンの動画を実現しますｄ

実現：CSSのAnimation効果のみの実現

• 例えば：タイトルの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;
    }
  }
  

• 実際の効果：