フォントをアニメートする恐ろしい電池アイコン

Question

これは初めての投稿です。私の質問は簡単です。あなたのクラスに適切なコードを追加して簡単にコグをアニメーション化するのと同じ方法で、バッテリーアイコンを空からフルにアニメーション化する簡単な方法がありますか？

Answer 1

fa-stackを使用すると、2つのフォントのすばらしいアイコンを重ねることができます。しかし、手動でアニメーションを作成する必要があります。アニメーションバッテリーのためにあなたは、

<span class="battery"> 
    <i class="fa fa-battery-empty"></i> 
    <i class="fa fa-battery-4 animate"></i> 
    </span> 

といくつかのスタイルを、これを試すことができ、

.battery{ 
    display: inline-block; 
    position:relative; 
    color:#444; 
} 


.battery .animate{ 
    width:0%; 
    position:absolute; 
    left: 0; 
    top:3px; 
    overflow: hidden; 
    color:#27ae60; 
    z-index: -1; 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
    transition:all 0.5s ease; 
} 

.battery:hover .animate{ 
    width:100%; 
} 

ここでデモ、http://jsbin.com/foruyez/edit?html,css,output

おかげです！