カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

CSSだけで実装する簡単なアニメーション [Transition]

この記事は最終更新日から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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です