「CSS3で画像をフェードインさせたりする。」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
CSS3の機能を使って画像をフェードインさせたりする方法を紹介したいと思います。色々なものをフェードインさせたりできるのだろうかという挑戦もかねて作っていきます。6月9日
~
~
目次
#contents
~
----
~
*まずは簡単なサンプルから
こちらの画像をフェードインさせたりフェードアウトさせたりしてみます。
イメージ
~
~
**コード
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>opacity＋フェードインとフェードアウト</title>
</head>
<body>
<div class="fadein">
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
div.fadein{
float:left;
width:400px;
height:266px;
background:url('flower.png');
border:1px solid #000;
-ms-animation-name: anime1;
-ms-animation-duration: 3s;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: infinite;
-ms-animation-direction:alternate;
-o-animation-name: anime1;
-o-animation-duration: 3s;
-o-animation-timing-function: ease;
-o-animation-iteration-count: infinite;
-o-animation-direction:alternate;
-webkit-animation-name: anime1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
-moz-animation-name: anime1;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
-moz-animation-direction:alternate;
}
@keyframes 'anime1' {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes anime1 {
0% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
@-o-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
@-ms-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
非常に長くなってしまいますが、ベンダープレフィックスを付けていきました。
それぞれの説明です。
|プロパティ名|説明|初期値|その他の値|h
|animation-name|あとに書くkeyframeの名前|none|アニメーション名|
|animation-duration|一回分の時間の長さ|0|5秒なら5s|
|animation-timing-function|アニメーションのタイミング・進行割合を指定|ease|linear,ease-in,iase-out,ease-in-outなど|
|animation-delay|アニメーションがいつ始まるかを指定|0|1秒なら1s|
|animation-iteration-count|アニメーションの繰り返し回数|1|2,3・・無限なら infinite|
|animation-direction|アニメーションを交互に反転再生させるかどうかの指定|normal|alternate（奇数回は再生方向、偶数会は逆再生方向）|
~
~
その他 opacity透明度 0は完全に透明、1は完全に不透明。初期値は1。
~
~
*rgba表記でも作ってみる
が、rgba表記は色の透明度を指定するだけだった・・・そりゃそうかｗ。画像の上のレイヤーに指定すればできるんかな？
~
~
*画面いっぱいの背景画像をフェードインさせてみる。
*参考サイト
+[[【CSS3】CSS3でフェードイン、フェードアウトを表現してみる:http://blog.oukasoft.com/htmlcss/%E3%80%90css3%E3%80%91css3%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%80%81%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E8%A1%A8%E7%8F%BE%E3%81%97/]]
+[[CSS3リファレンス:http://www.htmq.com/css3/animation.shtml]]
CSS3の機能を使って画像をフェードインさせたりする方法を紹介したいと思います。色々なものをフェードインさせたりできるのだろうかという挑戦もかねて作っていきます。6月9日
~
~
目次
#contents
~
----
~
*まずは簡単なサンプルから
こちらの画像をフェードインさせたりフェードアウトさせたりしてみます。~
&u(){イメージ}
１
#image(001.png)
２
#image(002.png)
３
#image(003.png)
まずはこんな感じに１～３をいったり来たりを作ってみる。
~
~
**コード
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>opacity＋フェードインとフェードアウト</title>
</head>
<body>
<div class="fadein">
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
div.fadein{
float:left;
width:400px;
height:266px;
background:url('flower.png');
border:1px solid #000;
-ms-animation-name: anime1;
-ms-animation-duration: 3s;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: infinite;
-ms-animation-direction:alternate;
-o-animation-name: anime1;
-o-animation-duration: 3s;
-o-animation-timing-function: ease;
-o-animation-iteration-count: infinite;
-o-animation-direction:alternate;
-webkit-animation-name: anime1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
-moz-animation-name: anime1;
-moz-animation-duration: 3s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: infinite;
-moz-animation-direction:alternate;
}
@keyframes 'anime1' {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes anime1 {
0% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
@-o-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
@-ms-keyframes anime1 {
from { opacity:1; }
to { opacity:0; }
}
非常に長くなってしまいますが、ベンダープレフィックスを付けていきました。
それぞれの説明です。
|プロパティ名|説明|初期値|その他の値|h
|animation-name|あとに書くkeyframeの名前|none|アニメーション名|
|animation-duration|一回分の時間の長さ|0|5秒なら5s|
|animation-timing-function|アニメーションのタイミング・進行割合を指定|ease|linear,ease-in,iase-out,ease-in-outなど|
|animation-delay|アニメーションがいつ始まるかを指定|0|1秒なら1s|
|animation-iteration-count|アニメーションの繰り返し回数|1|2,3・・無限なら infinite|
|animation-direction|アニメーションを交互に反転再生させるかどうかの指定|normal|alternate（奇数回は再生方向、偶数会は逆再生方向）|
~
~
その他 opacity透明度 0は完全に透明、1は完全に不透明。初期値は1。
~
~
*画面いっぱいの背景画像をフェードインさせてみる。
挑戦してみましたが、だめでした。以下取組履歴（dt,ddのwiki文法を書いているのですが、少し見にくくてすみません。いつかCSSを変えます。）
~
~
:[[背景画像をブラウザいっぱいに表示しているCSS記述方法]]のものをフェードインフェードアウトできるのか？|&color(red){背景画像はフェードインフェードアウトできなかったが、そのほかはフェードインフェードアウトした。body部分はだめだったので、次の取り組み}
:上記のbody内に#body_wrapperを作ってみた。|&color(red){だめだった。}
~
もっと小さく考えてみた。
~
:divボックスで、widthやheightをパーセント指定で作ってみた。|&color(red){だめだった。}
:widthやheightをピクセル指定で作ってみた。|&color(red){できた。というより最初の取り組みと同じ。}
~
環境：firefox38.0.5（記事執筆時最新バージョン）で試してみました。
~
~
どうやらフェードイン、フェードアウトは&color(red){幅や高さがピクセル指定の時のみできるそうです。}
~
~
*参考サイト
+[[【CSS3】CSS3でフェードイン、フェードアウトを表現してみる:http://blog.oukasoft.com/htmlcss/%E3%80%90css3%E3%80%91css3%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%80%81%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E8%A1%A8%E7%8F%BE%E3%81%97/]]
+[[CSS3リファレンス:http://www.htmq.com/css3/animation.shtml]]
