cssで画像をクロスフェードに挑戦

先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
とりあえず、一回コピペで試してみましたが、うまくいきません。
http://nobu-69.com/manakaa/sample2/
3枚目の画像の後に謎の空白時間があります。

現在の理解度

/*cssでスライドショー*/

クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
#bg_header{
margin:0 auto;
width:900px;
}

高さ指定は必須。指定しないと、場所が確保されないので。
画像は縦に3つ並びます。overflow:hidden;であふれた分を隠します。
.slider{
height:400px;
position:relative;
overflow:hidden;
}

各画像をabsolute the butcherで同じ位置に重ねる。
.slider img {
position:absolute;
width:100%;
}

opacity:0;で完全に透明にする。キーフレーム名(必須)をつける、overwrapとする。(任意の名前でいい)
24sは24秒という意味。何が24sなのでしょう?easeはイージング。infiniteは永遠に。
.slider img {
opacity:0;
animation:overwrap 24s ease infinite;
}

nth-of-type(1)は一枚目という意味かな?一枚目のディレイが0なのは、
すぐに表示させたいから。2枚目は4秒後に出現。3枚目は8秒後に出現。
.slider img:nth-of-type(1) {
animation-delay:0;
}
.slider img:nth-of-type(2) {
animation-delay:4s;
}
.slider img:nth-of-type(3) {
animation-delay:8s;
}

overwrapと名前をつけたキーフレームに色々と指定を書く。
ここが良く分からないです。
スライドショーの柿のやつの黒板の説明みたけど、?です。
難しいです。
@keyframes overwrap {
0% {opacity:0;z-index:10;}
5%,30% {opacity:1;}
44% {opacity:0;z-index:-1;}
45%,100% {opacity:0;z-index:-1;}
}

よろしくお願いします。

カテゴリー: study, 質問と回答 | タグ: , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

cssで画像をクロスフェードに挑戦」への2件のフィードバック

  1. のぶ

    なんとか出来たかな。ベンダープレ書かないとサファリでは見れないんですね。幅によって下に余白できるから、メデアクエリでさん段階で親の高さ変えました。

    返信
  2. タカハシ先生タカハシ先生

    animationの秒数指定は、その keyframesの100%に指定した状態になる秒数。
    animationを理解する為には、短めの秒数に指定たほうが、確認に時間がかかりません。
    さらに、出たり隠れたりするアニメだと、確認が困難なので、
    全てが見えている状態で、幅だけ変わる、などのアニメーションにしておいた方が良いですね。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.