ども、コンニチワ。弊ブログを猛烈リデザイン中のいぢま（@ezm_t ）です。
実は弊ブログのリニューアルをしようとしてまして、ローカルマシンでせこせことデザインを直したり、動作確認したりしてます。はい。
で、まあ、CSS3について調べながら試しながらやっている訳ですが、そんな中簡単な割に視覚効果の高い「transition」プロパティが素敵だという事を知ったので、他の方にも教えたくなっちゃいました。
ホントに簡単なので、サイト運営者の方は試してみるとイイ事あるかもw
そんな貴方のお役に立てればコレ幸いにございます。
「transition」プロパティは時間経過に対する変化を一括で指定するもので、個別に指定する場合は以下の様になっています。
- transition-property
- 効果を適用するプロパティ名を指定します
all: 全てのプロパティに適用
none: どのプロパティにも適用しない
{プロパティ名}: 任意のプロパティ名（複数の場合はカンマ（ , ）区切りで指定） - transition-duration
- 効果実行時間を秒単位（s）で指定します
- transition-timing-function
- 効果のタイミングと変化割合を3次ベジェ曲線で指定します
ease: 開始時と終了時の速度を滑らかにする
linear: 一定の速度で変化する
ease-in: 開始時の速度を緩やかにする
ease-out: 終了時の速度を緩やかにする
ease-in-out: 開始時と終了時の速度を緩やかにする
cubic-bezier(数値, 数値, 数値, 数値): 3次ベジェ曲線のP1とP2を任意に指定します - transition-delay
- 効果の遅延を秒単位（s）で指定します
で、「transition」プロパティは上記の値をスペース区切りで指定します。
以下の例だと、背景色を１秒掛けて一定の速度で0.2秒待って変化させます。
ex.) transition: background-color 1s linear 0.2s;
更に複数指定する場合は更にカンマ（,）で区切って続けて書きます。
ex.)
transition: background-color 1s linear 0.2s, height 1s linear 0.2s;
ただ、ブラウザによってうまく動作しない場合もあるので、プロパティの前に「-moz-」や「-webkit-」などのベンダープレフィックスを付けて各社用を記述した方が無難なようですね。
あと、古いバージョンのブラウザでは動作しません。無視されます。
ex.)
-moz-transition: background-color 1s linear 0.2s;
-webkit-transition: background-color 1s linear 0.2s;
-o-transition: background-color 1s linear 0.2s;
-ms-transition: background-color 1s linear 0.2s;
てな感じで「transition」を使うと色々面白い効果を付けられます。
が、今回オイラがオススメする「たった一行であなたのサイトをエレガントに変身させる」方法はこんな面倒なこたあしません。
上記のプロパティのうちの「transition-duration」だけを「a」タグに指定しちゃいなよってものです。
前提としては「a」タグと「a:hover」で文字色や背景色を別にしているものとしてます。
マウスカーソルを当てた時に色が変わる様にしている方は多いと思いますので、その場合はホントにたった一行CSSに追記するだけでオッケす。
やってない方は、ごめんなさい、一行じゃ済まないっす。
色々見た目の指定をしてください。
てことで、「a」タグと「a:hover」でデザインの違いを指定してあるとして、CSSに以下の様に追記してみてください。
a { transition: all 0.3s; }
コレだけです。
これでリンクにマウスカーソルを合わせた時の変化がほんの少しだけ緩やかになります。
実行時間の指定はお好みですが、オイラが色々試した感じでは”0.3s"が一番自然でエレガントな感じでした。
以下にサンプルを付けておくので、それぞれにマウスカーソルを合わせたり外したりして動作を確認してみてください。
ね、”0.3s"が丁度いい感じにエレガントでしょ？
品がある感じになってるでしょ？
もっと細かく指定したい場合は、前述したプロパティを参考に色々やってみるとイイと思います。
簡単にチョットだけサイトをお洒落にしたいって方は是非お試しください。
関連リンク
[スポンサードリンク]
