CSS アニメーションの例(opacity編)

今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。

 CSS transition-timing-function プロパティ

transition-timing-function(トランジション・タイミング・ファンクション)プロパティは、変化の流れ(変化の仕方)を指定します。

 CSS transition-delay プロパティ

transition-delay(トランジション・ディレイ)プロパティは、変化が始まるまでの待ち時間を指定します。

 CSS transition-duration プロパティ

transition-duration(トランジション・デュレーション) プロパティは、変化が始まって終わるまでの時間を指定します。

 CSS transition-property プロパティ

transition-property(トランジション-プロパティ) プロパティは、トランジション効果を適用するプロパティを指定します。

 CSS Transition 簡単なアニメーション

ホバー(:hover)を使って CSS transition(トランジション) の簡単なアニメーションを解説します。

 Font Awesomeの使い方

Webフォントの技術を使って様々なアイコンを提供してる便利なサービス『Font Awesome』を紹介します。

 メディアクエリ(@media)

メディクエリとは、特定の環境やデバイスを判定するときに用いられるものです。最近、一般的に使われるのはサイトを閲覧しにきたメディアの環境、横幅で判定しPCかスマートフォンか判断する方法です。簡単な例は下記です。

 ソウルナンバー占い|あなたのソウルナンバーで性格や愛情がわかる

後々、phpの勉強でソフト化しようと思っているネタのひとつに、ちょっと前に流行った『ソウルナンバー占い』というのを思い出しメモします。