2014年4月17日(木) 10時03分40秒 [仕事]

CSS3ならスタイルシートの記述だけでアニメーションが作成できる

CSS3で新しく追加されたプロパティや@規則を使えば、スタイルシートの記述だけでアニメーションが作れるんですね。なかなか驚きです。

ウェブ上で、文字を動かしたり配色を変化させたりといった「アニメーション」を実現するには、JavaScriptなどのスクリプトやFlashなどのアドインを使う必要があるイメージがあるかもしれません。
でも、CSS3で追加されたanimationプロパティや@keyframes規則を使えば、スタイルシートを記述するだけで、アニメーションが実現できます。スクリプトは不要なので、手軽です。

そんな、CSS3を使ったアニメーションの作り方を、All Aboutで解説しました。

◆『CSS3だけで特定の要素をアニメーションさせる方法』（＠All About ホームページ作成）

CSSなので、アニメーションさせたい要素に対して装飾を指定する方法で記述します。CSSで指定した装飾の値を、指定秒間で自由自在に変化させられます。
先進機能を使う際に気になるのは「古いブラウザで閲覧された場合にどう見えるか」ですが、この場合は、「アニメーションしない状態」で表示されるだけなので不都合はありません。安心して活用できます。

ぜひ、試してみて下さい。