背景画像の不透明アニメーション

Question

現在、#InnerImageの背景画像をフェードアウトしようとしています。ここで#InnerImageのためのコードは次のとおりです。

#OuterImage #InnerImage { 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

を私はコードは、他のすべての子供を作っているのdiv問題に実行している（？）：

<div id="InnerImage" style="background-image:url('imgurl.com'););background-repeat:no-repeat;background-position:50% 0%;"> 

ここで私が使用しているコードです#InnerImage内でも同様にフェードアウトしますが、背景画像がぼやけてしまいます。
1）私は上記のコードを実行していることを変更し、それは背景画像の不透明度のために可能ではなかったことを読みました：

私は2つの質問があります。このための回避策はありますか？
2）イメージが色あせした後、無限ループで消えるようにするにはどうしたらいいですか？

[EDIT]

#OuterImage #InnerImage{ 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
    animation-iteration-count: infinite; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 


#OuterImage #InnerImage::before { 
background: url('imgurl.com') no-repeat center left; 
    content: ""; 
    position: absolute; 
    /* the following makes the pseudo element stretch to all sides of host element */ 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    transition: opacity 1s ease 2s; 
    z-index: 1; 
} 
#OuterImage #InnerImage { 
    position: relative;} 
#OuterImage #InnerImage * { 
    position: relative; 
    z-index: 2; 
} 
#OuterImage #InnerImage 

Answer 1

あなたの最初の質問への回答：

#InnerImage::before { 
    background: url('imgurl.com') no-repeat center left; 
    content: ""; 
    position: absolute; 
    /* the following makes the pseudo element stretch to all sides of host element */ 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 1; 
} 

これは上position: relative;を設定する必要があります。

擬似要素の代わりに::beforeにbackground-imageを入れて#InnerImage：

#InnerImage { 
    position: relative; 
} 

、あなたが他のすべての子要素は、（あなたがそれらの要素を配置する場合にのみ必要な方法を適用する）z-indexを使用して擬似要素の上にあることを確認する必要があります。

#InnerImage * { 
    position: relative; 
    z-index: 2; 
} 

お知らせ：#OuterImage #InnerImage缶とにかくidの値が与えられたページ上に1つの要素しか存在しない可能性があるので、安全には#InnerImageに短縮してください。またなぜあなたはそれをやっているか分からない限り、セレクタをCSS に使用しないことをお勧めします。

アニメーションに関しては、2秒後に開始したいと思うようです。これは、このようなtransitionを使用して達成することができます。

1sはtransition-durationで、2sがtransition-delayある

transition: opacity 1s ease 2s; 

。

https://developer.mozilla.org/en/docs/Web/CSS/transition

例：

#InnerImage::before { 
 
    background: url(http://lorempixel.com/300/200) no-repeat center left; 
 
    content: ""; 
 
    position: absolute; 
 
    /* the following makes the pseudo element stretch to all sides of host element */ 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transition: opacity 1s ease 2s; 
 
    z-index: 1; 
 
} 
 
#InnerImage { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#InnerImage * { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#InnerImage:hover::before { 
 
    opacity: 0.25; 
 
}

<div id="InnerImage"> 
 
    <h2>Hey!</h2> 
 
    <button>noop</button> 
 
</div>

あなたは永久に継続フェードイン・フェードアウトをしたい場合は、アニメーションで行く必要がありますトランジションの代わりに n。

#InnerImage::before { 
 
    background: url(http://lorempixel.com/300/200) no-repeat center left; 
 
    content: ""; 
 
    position: absolute; 
 
    /* the following makes the pseudo element stretch to all sides of host element */ 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    animation: 3s ease 0s normal forwards 1 fadein; 
 
    animation-iteration-count: infinite; 
 
} 
 
#InnerImage { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#InnerImage * { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
@keyframes fadein{ 
 
    0% { opacity:0; } 
 
    50% { opacity: 1; } 
 
    100% { opacity:0; } 
 
}

<div id="InnerImage"> 
 
    <h2>Hey!</h2> 
 
    <button>noop</button> 
 
</div>

Answer 2

あなたがanimation-iteration-countプロパティを使用してinfiniteに値を設定することができ、無限ループでアニメーション化します。

#OuterImage #InnerImage { 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
    animation-iteration-count: infinite; 
} 

要素の不透明度を変更すると、すべての子要素に影響しますが、その周囲にはありません。

考えられるのは、背景のみを扱う#InnerImage内の要素を作成することです。背景divを位置絶対値に設定し、Zインデックスを0にして、このdivのみをアニメーション化します。そうすることで、アニメーションが変化すると、他の要素は不透明度で変化しません。

#InnerImage { 
 
    height:200px; 
 
    position:relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: red; 
 
    z-index: 0; 
 
    animation-name: fadein; 
 
    animation-duration: 6s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
.content { 
 
    position: relative; 
 
} 
 

 

 
@keyframes fadein{ 
 
    0% { opacity:0; } 
 
    50% { opacity:1; } 
 
    100% { opacity:0; } 
 
}

<div id="InnerImage"> 
 
    <div class="bg"></div> 
 
    <div class="content">other content</div> 
 
</div>

注テキストの内容が消えない例では背景が