複数の背景とCSSアニメーション

Question

私はCSSで複数の背景を使用しています（1つは企業の背景、もう1つはスタッフのメンバーです）。

これは私のコードです：

background: url("../../images/andy.png"),url("../../images/background.png") no-repeat top; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

これは正常に動作しますが、私は具体的には、第1のバックグラウンドパラメータ（url("../../images/andy.png")）に他のCSSオプションをアニメーション化してやりたいです。

これを参照する方法はありますか？それはそれ自身の要素ではないので、どのようにそれを可能にすることができますか？

ここに私のHTMLは、最も簡単な解決策は、中background.pngを追加することです

<section id="intro" class="main style1 dark fullscreen"> 
    <div class="content container 100% 12u(mobile)"> 
     <header> 
      <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div> 
     </header> 
     <div style="width:40%;margin-right:auto;margin-left:auto;"> 
      <p style="width:100%; margin-right:0; margin-left:0;"><i>“sometext”.</i></p> 
     </div> 
     <footer> 
      <a href="#work" class="button style2 down">More</a> 
     </footer> 
    </div> 
</section> 

Answer 1

です：あなたJSFiddleは少し過剰に複雑だったとアニメーションは、など、間違った要素上にあった

。

私は不要なものを削除しました。わかりやすくするために、HTMLの要素を使用してください。ここで

は、ご希望の効果CSSアニメーションをよく読んでhttps://jsfiddle.net/6nstfftn/4/

！：私は非常にCSSアニメーションに探して推薦する

を示し更新JSFiddleです。私がYouTubeでフォローしている男がいて、彼はすばらしいです。彼はいくつかの素晴らしいチュートリアルを持っています。

で彼を探す： https://www.youtube.com/devtipsfordesigners

彼はそれをチェックアウトCSSトランジション/アニメーション/エフェクトなどのいくつかのビデオで非常に最近シリーズを行っています。取るに

---

ステップ：

1. あなた#index要素のposition: relative;
2. 0に彼らのposition: absolute;とそのtop、bottom、leftとrightを設定し、:beforeと:afterのための擬似要素を追加してください（基本的に、それらの "親" elecの幅と高さを設定します）。 content: ''を必ず設定してください。そうでない場合は、サイズはありません。
3. その後、疑似要素について、background-imageを設定し、それらを適切に層にz-indexを設定する - そう - あなたはそれぞれの「背景」のための「デフォルト」のスタイルを設定
4. を好きな順番でそれらを持つことができます、あなたが0不透明度（フェードイン）で開始したい場合は、それを行います。同じように移動したい場合は、「開始」位置に移動します：TL; DR - 「終了」位置に設定すると、アニメーションが開始する前に要素が表示され、属性はCSSで定義されていない場合、アニメーションは、それが
5. 適用開始を設定するfromとtoを使用して、アニメーションのプロパティを終了@keyframes animationNameを、使用してアニメーションを作成します
6. で始まることだったのか分からないかもしれませんtransition各「背景」に属性を付けて滑らかにする
7. 各背景にanimation属性を適用し、それぞれの名前を0に設定します使用する。

   #intro { 
       position: relative; 
   } 
   
   #intro:after { 
       content: ''; 
       position: absolute; 
       top: 0; 
       bottom: 0; 
       left: 0; 
       right: 0; 
       background: url("http://i65.tinypic.com/2woc2o5.png") no-repeat top; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
       z-index: -2; 
       transition: all 0.5s ease-in-out; 
       animation: background 0.5s forwards; 
       opacity: 0; 
   } 
   
   #intro:before { 
       content: ''; 
       position: absolute; 
       top: 0; 
       bottom: 0; 
       left: 0; 
       right: 0; 
       background: url("http://i65.tinypic.com/2mn0w8j.png") no-repeat top; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
       z-index: -1; 
       transition: all 0.5s ease-in-out; 
       animation: andy 1s forwards; 
       transform: translateX(-100%); 
   } 
   
   @keyframes andy{ 
       from { transform: translateX(-100%); } 
       to { transform: translateX(0%); } 
   } 
   
   @keyframes background { 
       from { opacity: 0; } 
       to { opacity: 1; } 
   } 
   

   ：期間を設定し、バックアニメーション
8. シットの終了状態を保つためにforwardsを使用し、やりがいのある温かい飲料ここで

---

を楽しむことはCSSのスニペットです

私の例では、transition、animation、transformなどのベンダー固有の拡張は含まれていません。もちろん、可能性。

---

希望する効果を得るには、CSSアニメーションを調べることを強くおすすめします。

文字通り数百（数千ではないにしても）がそこにあります。

質問がありましたら、尋ねてください！

これは役に立ちます:)

Answer 2

です：私は擬似要素の前に、エールは、このアプローチでHow do I change the background image using jQuery animation?

をスタッフメンバーを変更します。後かCSSを使って1つだけbgを変更する方法はないと思ってください。両方を追加/変更する必要があります。あなたはこのように行うことができます

Answer 3

、ここで

.my-class:before{ 
    background: url("../../images/andy.png"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    /* Do the Animation for this Background image*/ 
} 
.my-class:after{ 
    url("../../images/background.png") no-repeat top; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    /* Do the Animation for this Background image*/ 
} 

はHTML

まず

<section id="intro" class="main style1 dark fullscreen"> 
    <div class="content container 100% 12u(mobile)"> 
     <header> 
      <div style="width:40%;margin-right:auto;margin-left:auto;"><h2 style="font-size:50px;">a title</h2></div> 
     </header> 
     <div style="width:40%;margin-right:auto;margin-left:auto;"> 
      <p style="width:100%; margin-right:0; margin-left:0;"> 
       <i>“sometext”.</i> 
      </p> 
     </div> 
     <footer> 
      <a href="#work" class="button style2 down">More</a> 
     </footer> 
    </div> 
</section>