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

• ページがロード後に、タイトルが一度スキャンのような動画効果を実現したいです。
• 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;
  
    }
  
  }
  

• 実際の効果：