[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ

サイト構築 -CSS

Post on:2011年9月20日

sponsorsr

キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。

Enhance Your Sites with CSS3 Animations
デモページ

[ad#ad-2]

下記は各ポイントの意訳です。

CSS3アニメーションとは
アニメーションでドロップダウンするヘッダ
透過PNGを使ったカラーアニメーション
回転するローディングのアニメーション
フォームのエラーをアニメーションで強調
フォームのエラーをアニメーションで強調:その2

CSS3アニメーションとは

CSS3アニメーションはエレメントに異なる見た目を順に適用するステータスから構成されています。これらのステータスを定義するにはキーフレームを使って、アニメーションの持続時間をセットします。インターバルはパーセントを使って定義し、それぞれにCSSのスタイルを指定します。

キーフレームを使ったアニメーションの基本

3つのステータスを定義し、異なるカラーを適用した例です。

/* Defining a basic animation */
@keyframes colours {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}
 
/* Activating the animation */
body {
    animation-name: colours;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

このキーフレームを使ったCSS3アニメーションは、ページの背景をゆっくりとレッドからグリーン、そしてブルーに変更します。

では、このキーフレームを使ったCSS3アニメーションを紹介します。
対応ブラウザは、Firefox, Chrome, Safariです。

[ad#ad-2]

アニメーションでドロップダウンするヘッダ

ページのロードと共に、ゆっくりとドロップダウンするヘッダです。
非対応ブラウザではそのエフェクトを見ないだけです。

デモページ

CSS:基本スタイル

ヘッダの基本スタイルです。高さを100px、背景色とテキスト色を指定します。
ここで一番重要な指定は、「position: relative;」です。

header {
    /* Basic Styles */
    background: black;
    color: white;
    height: 100px;
    position: relative;
}

CSS:アニメーションの定義

「position: relative;」をセットしたので、アニメーションで表示位置が変更されるように定義します。

@-moz-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}
@-webkit-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}

CSS:ドロップダウンのエフェクト

ドロップダウンのエフェクトを設定します。持続時間は1秒をセットし、イージングを適用します。

header {
    /* Basic Styles */
    background: black;
    color: white;
    height: 100px;
    position: relative;
 
    /* Firefox 4+ */
    -moz-animation-name: header-drop;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 1s;
 
    /* Webkit */
    -webkit-animation-name: header-drop;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: once;
    -webkit-animation-duration: 1s;
}

透過PNGを使ったカラーアニメーション

透過PNG画像を使用して、背景色をアニメーションさせます。

デモページ

CSS:アニメーション

デモではゆっくりと、レッドからグリーン、そしてブルーにアニメーションします。

#logo {
/* Ensure that you set a background colour for browsers that don’t support animations */
    background: red;
    -moz-animation-name: colour-change;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 30s;
}
 
/* Set Animation */
@-moz-keyframes colour-change {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}

回転するローディングのアニメーション

画像が360度回転しているかのようなローディングのアニメーションを作ります。

デモページ

CSS:アニメーション

10pxのグレーのボーダーを指定し、角丸を使い円にしています。回転のアニメーションはボーダーの一部をブラックにすることで適用しています。
非対応ブラウザにも同様のエレメントを提供する場合は、Modernizeを使用して古いブラウザの時にはGIFアニメーションやスタティックなアイコンに置き換えるとよいでしょう。

.spinner {
    height: 10px;
    width: 10px;
    border: 10px solid #888;
    border-radius: 20px;
 
    -moz-animation-name: loading;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1s;
}

@-moz-keyframes loading {
    0% { border-top: 10px solid black; }
    25% { border-right: 10px solid black; }
    50% { border-bottom: 10px solid black; }
    75% { border-left: 10px solid black; }
    100% { border-top: 10px solid black; }
}

フォームのエラーをアニメーションで強調

フォームのエラーをユーザーにより強調して伝えるためにアニメーションを使用します。

デモページ

CSS:アニメーション

フォームのエラー時にbox-shadowでぼやけをアニメーションさせます。

input[type="text"].error {
    border: 1px solid #D11919;
    border-radius: 6px;
 
    -moz-animation-name: glow;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 500ms;
}
@-moz-keyframes glow {
    0% { box-shadow: 0 0 5px #D11919; }
    100% { box-shadow: 0 0 15px #D11919; }
}

フォームのエラーをアニメーションで強調:その2

アニメーションで強調するアイデアは他にもあります。
今度は入力ボックスを振動させます。

CSS:アニメーション

「position: relative;」で配置し、アニメーションで位置を変更します。

form {
    background: #CCC;
    border: 1px solid #888;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    position: relative; 

    -moz-animation-name: shakey;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 200ms;
}
@-moz-keyframes shakey {
    0% { left: -10px; }
    25% { left: 10px; }
    50% { left: -10px; }
    75% { left: 10px; }
    100% { left: 0px; }
}