CSS3でアニメーション

CSS3を使用する事でアニメーションが再現できます！

JavaScript・Ajax、Flashで作りそうな、

画像をフェードイン・フェードアウトをさせるサンプルを作成してみました！！

※ブラウザはSafari・Google Chromeで確認してください。

*{margin:0; padding:0;}

 div{
    margin:0 auto;
    position: relative;
    width:500px;
    height:500px;
    background:#ab9;
 }

#img1 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease;
}

#img2 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease 5s;
}

#img3 {
    position: absolute;
    top: 50%;
    left: 60%;
    margin-top: -157.5px;
    margin-left: -157.5px;
    opacity: 0;
    -webkit-animation: fadeInAndOut 5s ease 10s;
}

@-webkit-keyframes fadeInAndOut {
    from {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

サンプルURL

http://web.kenblog.net/img_webblog/web093_img/sample.html

opacityというプロパティは透明度の指定になります。
 

rgbaというプロパティも同じように透明度を指定するものですが、

次回どんな違いがあるのかご説明いたします！！

opacityは全てのブラウザでは対応していません。
 

Safari4・Firefox3.5・Opera10で表現できますが、

IE(インターネットエクスプローラー)では表現できません。

値は0～1で指定します。

 1　　通常時
 0.9　　↓
 0.8　　↓
 0.7　　↓
 0.6　　↓
 0.5　　↓
 0.3　　↓
 0.4　　↓
 0.3　　↓
 0.2　　↓
 0.1　　↓
 0　　完全な透明

このプロパティを使い、配置した画像を透明にしています。

そして-webkit-animation、これがCSS3のプロパティです！

今回は3枚の画像をフェードイン・フェードアウトさせる設定をするため、

まず一つ一つの画像に対して…

#img1には→-webkit-animation: fadeInAndOut 5s ease;

#img2には→-webkit-animation: fadeInAndOut 5s ease 5s;

#img3には→-webkit-animation: fadeInAndOut 5s ease 10s;

と指定します。

これらは1つの画像の制御になります。

上記のプロパティに "fadeInAndOut 5s ease 5s;" とありますが、

最初の "5s" 部分は表示時間、つまり5秒を指定しています。

次の "ease" は、最初と最後に少し減速という意味になり、

表示のさせ方を指定するものです。

他にも最初に減速という "ease-in"といった指定もありますので、

色々調べて試してみましょう！！ 

※Flashでいうイージングです。

最後の "5s" は次の画像を表示させるまでの時間です。

一枚目の画像に指定がないのは最初の画像なので、

htmlファイルを開くと同時に表示するからです。

二枚目の画像は5秒後にフェードイン・フェードアウトさせます。

※一枚目が5秒でフェードアウトして消えていくので、
　それに合わせて表示させるため。

三枚目の画像は10秒後フェードイン・フェードアウトさせます。

※二枚目までが10秒かかっているため。

そして最後に@-webkit-keyframes fadeInAndOutですが、

これが画像のフェードイン・フェードアウトを

制御している指定になります。

この記述の中のプロパティのご説明ですが、

@-webkit-keyframes fadeInAndOut {
    from {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

●"from"は開始位置になります。

※Flashでいう1フレーム目。

●"50%"中間位置になります。

※ここは"何%"にするかで変わる。

●"to"は最終位置になります。

※アニメーションを動かすための最終位置。

opacityは上記の説明と一緒なので透明度の設定になります。

このプロパティを記述することで、画像が…

最初は不透明な(見えない)状態
   ↓
中間になると通常(配置した画像)時の画像
   ↓
最後に不透明な(見えない)状態

以上のように変化します。
 

このような記述で

画像にフェードイン・フェードアウトをさせることができます。

CSS3は対応ブラウザに制限がありあますので

実際には中々使わないかもしれませんが、

面白い機能が色々ありますので、

チャレンジしてみると面白いと思います！！

最後にもう一度。

上記でもご説明しましたが、

確認はSafariかGoogle Chromeでお願いいたします！

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html