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

css
html
pseudo-class
transform
transition

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

  • 矢印と文字をマウスオーバー時に交替に表示させたいです
    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>