アイコンフォント使用の矢印アニメーション

2018年2月27日 | Web

リスト項目として利用されるli要素にcontentでFont Awesomeのアイコン矢印を表示しマウスオーバー時にアニメーションさせる方法をご紹介します。ブログ一覧やシングルページなどのサイドバーで使用する事を想定して作っておりますが、その他ボタンなどでも使えます。

まずFont Awesome Iconsを表示させるためにhead内に下記のCDNをコピペして下さい。


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML


 <div class="side_bar">
  <div class="widget">
    <p class="title">Recent Posts</p>
   <hr>
    <ul>
      <li><a href="#"> 最新の記事タイトル出力</a></li>
      <li><a href="#"> 1つ古い記事のタイトルが出力</a></li>
      <li><a href="#"> 2つ古い記事のタイトルが出力</a></li>
      <li><a href="#"> 3つ古い記事のタイトルが出力</a></li>
      <li><a href="#"> 4つ古い記事のタイトルが出力</a></li>
     </ul>
  </div>
 </div>

CSS


ul{
     margin: 0;
     padding: 0;
}
ul li{
    margin: 15px 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: #2660A4;
    font-size: 15px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
a:hover{
    color: #3382DD;
}
.side_bar{
    width: 320px;
}
.widget ul li a:before{
    position: relative;
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 5px;
}
.widget ul li a:hover:before{
    animation: arrow .5s ease-out forwards;
}
.side_bar .title{
    font-size: 18px;
    line-height: 22px;
    color: #7A7F7E;
    font-weight: bolder;
    margin: 0;
    padding: 0;
}
@keyframes arrow {
 0% {
    left: 0px;
    }
 50% {
    left: 5px;
    }
 100% {
    left: 0;
    }
}