CSSを使ってアニメーションさせる方法

  • このエントリーをはてなブックマークに追加

アニメーションはCSSで作れる

ボタンにマウスを載せた時に背景色を変える、文字色を変えるなどの変化を加える際、普通に作りこむとパッ!っと一瞬で色が変わりますよね。
例えばこんな感じ・・・

リンクボタン

CSS
a{
background:#00f;
color:#fff;
}
a:hover{
background:#fff;
color:#00f;
}

なんだか少し味気ないですよね。これが徐々に変化していったら面白くないですか?
実はCSSだけでできるんです。

transitionを使う

アニメーションを付けるにはtransition:all 0.3s;を使います。

リンクボタン

CSS
a{
background:#00f;
color:#fff;
transition:all 0.3s;
}
a:hover{
background:#fff;
color:#00f;
}

transitionは変化させる前の要素に与えることでCSSで指定した変化の前後をtransitionで指定した時間の中で自動補完してくれます。
時間の指定はミリ秒でできるので、細かく調整する事ができます。
例にあげたCSSでは「0.3s」となっているので、0.3秒かけて背景色と文字色が変化します。

背景色と文字色の変化スピードに差を設けるには

先ほどの例では背景色も文字色も同じく0.3秒のアニメーションが作成されています。
でも背景色だけ遅らせたい・早くしたいといった細かな調整にも対応しているんです。

それぞれの設定を変更するには「all」となっている部分を変更します。

リンクボタン

CSS
a{
background:#00f;
color:#fff;
transition:
  background 0.3s,
  color 0.8s;

}
a:hover{
background:#fff;
color:#00f;
}

このように「background 0.3s;」「color 1.3s;」といったように記述します。
これで個々にアニメーションスピードを変更する事ができるんです。

前に設定されていた「all」は全ての要素に対して時間を設定する書き方です。
個々に設定するには「CSSプロパティを書いてから、半角スペース、秒数」と記述します。

1秒は意外と長い

普段の生活で1秒は短いイメージがある方が多いと思います。
でも実際にアニメーションを作成すると、1秒が長く感じられるはずです。
なので時間指定をする場合は「0.4s」など、短い時間を指定してみてください。

色の変化以外にもアニメーションが付けられる

背景色(background)、文字色(color)の他にも横幅(width)や高さ(height)などの数値で指定できる項目についてはほぼアニメーションを与える事ができます。

a{
display:block;
background:#00f;
color:#fff;
width:60px;
height:30px;
transition:all 0.3s;
}
a:hover{
background:#fff;
color:#00f;
width:120px;
height:60px;
}

たとえばこのようなCSSがあった場合、a要素にマウスカーソルを載せた時には「背景色が青から白」「文字色が白から青」「横幅が60pxから120px」「縦幅が30pxから60px」へと変化するアニメーションが作成されます。

他にもpositionプロパティを使って要素を配置している場合、「top・right・bottom・left」にもアニメーションを付けて要素が移動する動きを作成できますし、「padding・margin」にもアニメーションを付ける事ができます。
このように「00px」や「00em」「00%」などの数値を入れる項目へアニメーションを付けて色々と試してみてください。

レスポンシブWEBデザインの場合は「all」にしない方がいい

レスポンシブWEBデザインで作成したホームページの場合、transitionを与えるときに「all」は控えるようにした方がいい場合が多くあります。
それは画面幅によってCSSに変化を加えることに問題があります。

例えばPC画面で横幅900pxに指定した要素があったとします。そしてそれがタブレットでは750pxになる様にCSSで書かれていたとします。
もしそれにtransitionでアニメーションがついていたら・・・?
そう、パソコンで表示しているブラウザの横幅がタブレットサイズになったとき、900pxから750pxへ変化するアニメーションが付いてしまうんです。
こういった意図しないアニメーションによる見た目上の不具合を抑制する意味合いでも「all」の使用は避けて、変化を加えたい要素にだけアニメーションを付ける様にしておくことをオススメします。

まとめ

・アニメーションを付けるには、「a{}」と「a:hover{}」などを使って変化前後のCSSを作成し、変化前(a{}」へ「transition」を付ける
・transitionはミリ秒で時間を指定できるので「transition:all 0.3s;」といったように記述する
・「all」の部分をCSSプロパティに置き換えれば、要素毎に時間指定ができる
・複数の要素へ時間指定する場合「,(カンマ)」でつなげる

  • このエントリーをはてなブックマークに追加

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301