【JS不要】CSSだけで要素をアニメーションしよう!

【JS不要】CSSだけで要素をアニメーションしよう!

js不要

最近は子どもに習わせたい習い事として人気の「プログラミング」。
学校でも近い将来必修科目となってきます。

若いものには負けてられない!ということで、これからプログラミングを始めてみたい。手始めにWebサイトを作ってみたい!HTMLはわかったけど、CSSはまだまだ、、、という方に向けて、何回かに分けてワンポイントテクニックをご紹介していきます。

CSSだけでも要素のアニメーションはできる!

一昔前は、ページの中のボタンや項目にマウスカーソルを載せたときにアニメーションさせたいと思ったときは、JavascriptやFlashなどを使う必要がありました。

ですが、動作が重かったり、そもそもFlashは近ごろのブラウザではブロックされてしまったりと、あまりメリットはありませんでした。

そんな中CSSだけで、動作が重くなることもなく、非常に簡単にアニメーションを実装させることができます。下の例をご覧ください。

See the Pen
LYYozdX
by TAKASHI (@takashi1107)
on CodePen.

こちらの例を見てもらうと、Javascriptは一切使わずに、赤いボタンにマウスカーソルを合わせると、色が薄くなり横幅が大きくなります。

仕組みを解説すると、まずbuttonクラスでボタンの通常の見た目を定義しています。その中に


transition: 0.3s all ease;


という記述があります。これは、このボタンに対してなにかアニメーションが発生したときは、0.3秒かけてイージングありのアニメーションをさせるという記述になります。

アニメーションしたときの記述は、別記述

この要素をどんなふうにアニメーションさせるかは、transitionとは別の箇所に記述します。それが、

.button:hover {
opacity: 0.7;
width: 240px;
}

この記述となります。先ほどのtransitionの記述がなく、上記の:hoverの記述だけだと、マウスカーソルを載せたときに一瞬で表示が変わってしまいますが、transitionを記述していることにより、一瞬で変化していたものが0.3秒かけて徐々に変化していくようになります。

Web開発カテゴリの最新記事