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

2018年2月27日 | Web

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

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

[html]

[/html]

HTML

[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>

[/html]

CSS

[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;
}
}