にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:24.

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

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

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

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---