フリーで使えるアイコン(Dingbats)をWebフォントに埋め込んでみた!
Webフォントの技術を使って様々なアイコンを提供してる便利なサービス『Font Awesome』のサイトのようにアイコンをWebフォントにしてみました。
Webフォントの技術を使って様々なアイコンを提供してる便利なサービス『Font Awesome』のサイトのようにアイコンをWebフォントにしてみました。
animation-duration(アニメーション・デュレーション) プロパティは、アニメーションが始まって終わるまでの時間を指定します。
animation-name(アニメーション・ネーム)プロパティは、対象の要素に適用する1つ、または複数のアニメーションを設定します。それぞれの名前はアニメーション・シーケンスのプロパティ値を定義する @keyframes を設定します。
今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。
transition-timing-function(トランジション・タイミング・ファンクション)プロパティは、変化の流れ(変化の仕方)を指定します。
transition-delay(トランジション・ディレイ)プロパティは、変化が始まるまでの待ち時間を指定します。
transition-duration(トランジション・デュレーション) プロパティは、変化が始まって終わるまでの時間を指定します。
transition-property(トランジション-プロパティ) プロパティは、トランジション効果を適用するプロパティを指定します。
ホバー(:hover)を使って CSS transition(トランジション) の簡単なアニメーションを解説します。
Webフォントの技術を使って様々なアイコンを提供してる便利なサービス『Font Awesome』を紹介します。
Webdesign(html , css , javaScript)、Wordpress(php)、Photoshop、Illustrator、ePUB