ｃｓｓでページャーのアニメ―ジョン効果

やりたいこと：cssのみでページャーのアニメ効果を作成します

• 矢印と文字をマウスオーバー時に交替に表示させたいです
  
• ｃｓｓのみで実現したいです（余計なjavascriptを使用しない）

実現：ページャーのアンカータグと疑似クラス（after）を利用して矢印と文字を表示します

• 以下のようなページャー（html）があります

  <ul class="pager">
      <li class="pager-current first">1</li>
      <li class="pager-item"><a title="2ページへ" href="/articles?page=1">2</a></li>
      <li class="pager-item"><a title="3ページへ" href="/articles?page=2">3</a></li>
      <li class="pager-item"><a title="4ページへ" href="/articles?page=3">4</a></li>
      <li class="pager-item"><a title="5ページへ" href="/articles?page=4">5</a></li>
      <li class="pager-item"><a title="6ページへ" href="/articles?page=5">6</a></li>
      <li class="pager-item"><a title="7ページへ" href="/articles?page=6">7</a></li>
      <li class="pager-item"><a title="8ページへ" href="/articles?page=7">8</a></li>
      <li class="pager-item"><a title="9ページへ" href="/articles?page=8">9</a></li>
      <li class="pager-ellipsis">…</li>
      <li class="pager-next"><a href="/articles?page=1">次</a></li>
      <li class="pager-last last"><a href="/articles?page=10">最終</a></li>
  </ul>
  

• ここで最後の要素（pager-last）を例として説明します

cssの疑似クラス（after）で矢印の要素を作成

• ここで、Fontawesomeでのアイコンで矢印を作成します

  li.pager-last a:after{
      content:"\f050";
      font-family: "FontAwesome";
      display: inline-block;
      position:absolute;
      -webkit-transform: translate(-30px, -42px);
              transform: translate(-30px, -42px);
      -webkit-transition: transform 0.3s ease-in-out;
              transition: transform 0.3s ease-in-out;
  }
  

• position：absoluteで矢印の配置場所を変更できるようにします
• transform: translate(-30px, -42px)で矢印の配置場所をアンカーの文字（最終）に合わせます
• transition: transform 0.3s ease-in-outでアニメ効果を高めます

cssでアンカーの文字(最終)を下に移動

• 同様にposition:absoluteとtransform:translateでアンカーの文字を下に移動します

  .pager li.pager-last a{
      transform: translateY(100%) ;
      transition: transform 0.3s ease-in-out;
  }
  

マウスオーバー(hover)時にアンカータグが全体的に上にシフト

• liタグ要素にマウスオーバー（hover）時に、transform: translateY(0)設定、アンカータグが全体的に上にシフトされます

  .pager li.pager-last:hover a{
      transform: translateY(0) ;
      transition: transform 0.3s ease-in-out;
  }
  

cssでページャー要素（liタグ）外に非表示

• cssのoverflow: hidden;でページャー要素（liタグ）外は非表示にします

  .pager li {
      overflow: hidden;
  }
  

• ページャー要素外非表示より、矢印とアンカー文字をマウスオーバー時に非表示することができるようになります

ページャーの実例

• 以下の要素にマウスオーバーしたらして、実の効果を確かめることはできます

• 上記例のcss、htmlソースは以下のよう

  <style type="text/css">
      .pager li {
          margin-right: 4px;
          border: 1px solid #ccc;
          padding: 0;
          display: inline-block;
          border-radius: 4px;
          overflow: hidden;  
      }
      .pager li a{
        padding:0.5em;
        font-size:18px;
        border-radius: 4px;
        text-decoration:none;
        display:inline-block;
      }
      .pager li.pager-last a:after{
          content:"\f050";
          font-family: "FontAwesome"; 
          display: inline-bloc;
          position:absolute;
          -webkit-transform: translate(-30px, -42px);
                  transform: translate(-30px, -42px);
          -webkit-transition: transform 0.3s ease-in-out;
                  transition: transform 0.3s ease-in-out;
      }
      .pager li.pager-last a{
          transform: translateY(100%) ;
          transition: transform 0.3s ease-in-out;
          color:#2e70b1;
      }
      .pager li.pager-last:hover a{
          transform: translateY(0) ;
          transition: transform 0.3s ease-in-out;
      }
  </style>
  
  <ul class="pager">
      <li class="pager-last last"><a href="#">最終</a></li>
  </ul>