CSS3だけで特定の要素をアニメーションさせる方法(2ページ目)

CSS3でアニメーションを作る基礎

それでは、CSS3で新たに追加されたアニメーション関連のプロパティと@規則を使って、簡単なアニメーションを作成してみましょう。アニメーションに関連するプロパティ・@規則は右図の通りですが、必須なのは赤色で掲載している3つのみです。

詳細を具体的にご紹介する前に、簡単なサンプルを使って、記述方法の基本を解説しておきます。

「animation-name」プロパティ(名称を指定)と、「@keyframes」規則(動作を記述)

CSS3で作成するアニメーションの基本は、以下の2点です。

1. animation-nameプロパティを使って、適用するアニメーション名を指定。
2. @keyframes規則を使って、(1で記述した名称に対する)アニメーションの動作内容を記述。

この2点の関係を、CSSソース中で図示すると、以下の赤枠部分のようになります。


上記のCSSソースでは、4行目に記述したanimation-nameプロパティで、「slidein」という名称のアニメーションを適用しています。その「slidein」という名称が指す具体的な動作内容は、7～16行目に@keyframes規則を使って作成しています。ここでは「slidein」という名称にしましたが、この名称は何でも自由に付けられます。

上記のように記述することで、特定の要素(上記の例ではh1要素)に対して、指定のアニメーション効果(上記の例ではslidein)を適用できます。

このように、「アニメーションの動作内容」と、「アニメーションの適用対象」とを分けて記述できるので、同一のアニメーション効果を複数の場所で使いたい場合でも、記述する「アニメーションの動作内容」は、1つで済みます。

アニメーションの表示秒数を指定する「animation-duration」プロパティ

上記でご紹介した、「animation-name」プロパティと「@keyframes」規則に加えて、もう1つ「animation-duration」プロパティを記述すれば、最低限のアニメーションとして機能します。「animation-duration」プロパティは、アニメーションの開始から終了までにかかる時間(秒数)を指定するプロパティで、以下のように記述します。

animation-duration: 5s;

上記は、アニメーション効果を5秒間かけて表示(再生)する指定です。単位を「ms」にすると「ミリ秒」での指定になります。「5s」と「5000ms」はどちらも同じ5秒です。

それでは、次のページで、これらのプロパティ・@規則を使って、シンプルなアニメーションを作成する例をご紹介いたします。