多くの背景画像から1つの背景画像をアニメ化する

Question

CSSで2つの背景画像を実装して、Photoshopレイアウトごとにブレンドモードスタイルを取得しました。そして、私もそれを得ました。しかし、今私は、それらのうち1つだけのイメージをアニメートしたいです。

.home 
    background: 
     image: url(https://i.stack.imgur.com/XZDsP.jpg), url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png) 
     blend-mode: color-dodge 
     repeat: no-repeat 
     size: cover, contain 
     position: 0, center 
    height: 100vh 

どうすればいいですか？

これをチェックするcodepen。私は

Answer 1

はこれを試してみてください別のクラスは、あなたの<section>

に新しい<div>に割り当てる定義前景画像（蜘蛛の巣）のための無限のアニメーションを回転したいです。

<section class="home"> 
    <div class="rotating"></div> 
</section> 

/* rotation animation */ 
@-webkit-keyframes rotate { 
    from { -webkit-transform:rotate(0deg); } 
    to { -webkit-transform:rotate(360deg); } 
} 

@-moz-keyframes rotate { 
    from { -moz-transform:rotate(0deg); } 
    to { -moz-transform:rotate(360deg); } 
} 

@-ms-keyframes rotate { 
    from { -ms-transform:rotate(0deg); } 
    to { -ms-transform:rotate(360deg); } 
} 

@-o-keyframes rotate { 
    from { -o-transform:rotate(0deg); } 
    to { -o-transform:rotate(360deg); } 
} 

.rotating { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-image: url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png); 
    -webkit-transform-origin: 50% 50%; 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-transform-origin: 50% 50%; 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 1.5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-transform-origin: 50% 50%; 
    -ms-animation-name: rotate; 
    -ms-animation-duration: 1.5s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
    -o-transform-origin: 50% 50%; 
    -o-animation-name: rotate; 
    -o-animation-duration: 1.5s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function: linear; 
} 

は何が必要..私はあなたがよく私の質問を取得していないと思う、それは