■ はじめに
Font Awesomeのアイコンをマウスオーバーした際に動かしてたくて色々と調べてたら
「Font Awesome Animation」ってのがあったので試してみた。
補足 : Font Awesomeのみで可能なアニメーション
* アイコンを「回す（fa-spin）」「チカチカ（fa-pulse）」だけなら、Font Awesomeのみで可能
サンプル (Font Awesomeのみ)
<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<title>Demo</title>
</head>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fas fa-circle-notch fa-spin fa-3x fa-fw"></i>
<i class="fas fa-sync-alt fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</body>
</html>
■ 構文
<i class="【Font Awesomeのicon】 【アニメーション種類】"></i>
■ サンプル
<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css">
<title>Demo</title>
</head>
<div><i class="fa fa-trash-alt faa-shake animated-hover"></i> fa fa-trash-alt faa-shake animated-hover
<div><i class="fa fa-pencil-alt faa-tada animated-hover"></i> fa fa-pencil-alt faa-tada animated-hover
<div><i class="fa fa-bell faa-ring animated-hover"></i> fa fa-bell faa-ring animated-hover
<body>
</body>
</html>
