ホームページに動きをつける方法というと、JavaScriptを思い浮かべる方が多いと思います。
じつは、CSSだけでもアニメーションをつけることができます。
今回はCSSアニメーションについて紹介します。
CSSについて
CSS（Cascading Style Sheets）は、HTMLで作成したページの見た目（デザイン）を整えるための言語です。
文字の色やサイズ、背景色、枠線、余白、レイアウトなど、見た目に関するほとんどを自由に設定できます。
基本形は以下の通りです。
〇〇（セレクタ） {
△△（プロパティ名）：□□（値）;
}
～Crebitテキストより～
CSSのアニメーション
CSSには、さまざまなアニメーションを表現できる仕組みがあります。
普段ホームページでよく目にする動きの多くも、CSSで作られていることが少なくありません。
代表的なアニメーションは以下のようなものがあります。
・拡大縮小して鼓動する
・徐々に表示される
・徐々に消える
・左右や上下に移動
・ボールのように弾む
・回転する
・小刻みに揺れる
・点滅する
・左右に振れる
・拡大しながら出現 / 縮小しながら消える
・色が変わる
・タイピングしてるように文字が出る
なお、Crebitプログラミング教室でも教えていますが、CSSは調べながら使えばよいので覚えなくてOKです。
CSSのアニメーション例
それでは、実際のコードをひとつ紹介します。
以下は四角いボックスが左右に動くアニメーションの例です。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>移動アニメーション</title>
<style>
.box {
width: 50px;
height: 50px;
background: tomato;
position: relative;
animation: move 2s infinite alternate;
}
@keyframes move {
from { left: 0; }
to { left: 200px; }
}
</style>
</head>
<body>
<div class=”box”></div>
</body>
</html>
まとめ
JavaScriptを使わなくても、CSSだけでさまざまなアニメーションを作ることができます。
「見た目を整えるだけ」ではなく、「動きで魅せる」こともできるのがCSSの面白さです。
よかったら試してみてくださいね。
Crebitプログラミング教室では、JavaScriptを題材にプログラミングの基礎を学びます。
また、一部ではHTMLやCSSなど、Webページ制作の基礎についても学習することができます。
興味のある方は、ぜひ無料相談会にご参加ください。