CSSだけで実装する簡単なアニメーション [Transition]
- 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,714 views




