- CSS
- 2013-09-03
この記事は最終更新日から1年以上経過しています。
アンカーテキストの色をじわっと変えたりすることがCSSだけでできちゃいます。
jQueryを使ってもできるようですが、ここではCSSだけで実装します。
書式
transition: アニメーションさせたいプロパティの名前 アニメーション終了までにかける時間を秒で指定(省略すると0) イージングの種類(省略するとease) アニメーションが始まるまでの遅延を秒で指定(省略すると0);
例)
a { color: #0099cc; text-decoration: none; bacground: #ffffff; transition: color 0.25s ease-in-out; } a:hover { color: #95e4ff; text-decoration: underline; background: #49b6da; }
複数指定するときはカンマで区切ります。
transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
linear | 等速直線運動的な変化 |
---|---|
ease-in | 最初はゆっくり、最後にいくにつれて激しく変化 |
ease-out | 最初は激しく、最後にいくにつれてゆっくり変化 |
ease | ゆっくり始まって、途中で最高速になり、最後はまたゆっくり変化 |
ease-in-out | easeをもう少しきびきびさせたような感じ |
cubic-bezier() | ベジェ曲線でアニメーションの変化の仕方を指定 |
2,538 views