Webフォントの技術を使って様々なアイコンを提供してる便利なサービス『Font Awesome』のサイトのようにアイコンをWebフォントにしてみました。
HTML
Webフォントの開発で、文字化けがおきないようにする為、「Unicode 変換ツール」が必要だったので、ちょこっと拝借！便利です！
animation-duration（アニメーション・デュレーション） プロパティは、アニメーションが始まって終わるまでの時間を指定します。
animation-name（アニメーション・ネーム）プロパティは、対象の要素に適用する1つ、または複数のアニメーションを設定します。それぞれの名前はアニメーション・シーケンスのプロパティ値を定義する @keyframes を設定します。
今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。
transition-timing-function（トランジション・タイミング・ファンクション）プロパティは、変化の流れ（変化の仕方）を指定します。
transition-delay（トランジション・ディレイ）プロパティは、変化が始まるまでの待ち時間を指定します。
transition-duration（トランジション・デュレーション） プロパティは、変化が始まって終わるまでの時間を指定します。
transition-property（トランジション-プロパティ） プロパティは、トランジション効果を適用するプロパティを指定します。
ホバー（:hover）を使って CSS transition（トランジション） の簡単なアニメーションを解説します。