CSS3の機能を使って画像をフェードインさせたりする方法を紹介したいと思います。色々なものをフェードインさせたりできるのだろうかという挑戦もかねて作っていきます。6月9日
目次
こちらの画像をフェードインさせたりフェードアウトさせたりしてみます。
イメージ
１
２
３
まずはこんな感じに１～３をいったり来たりを作ってみる。
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; }
}
非常に長くなってしまいますが、ベンダープレフィックスを付けていきました。 それぞれの説明です。
| プロパティ名 | 説明 | 初期値 | その他の値 |
| 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を変えます。）
