CSSでネストされたイメージをアニメートすることはできますか？

Question

私は、CSSだけを使って上にマウスを置くと、一連の画像を表示するブロックを作成しました。

Codepen

HTML

<div class="logos"></div> 

CSS

body{ 
background: #fff; 
} 

.logos{ 
width: 400px; 
height: 400px; 
margin: auto; 
background: url('http://45.79.67.59/logo_thumb_bar.jpg') left center; 
} 

@keyframes play{ 
100% { background-position: 2000px; } 
} 
.logos:hover{ 
-webkit-animation: notexistent; 
animation: notexistent; 
animation: play 2.5s steps(5) infinite; 
} 

私の質問は：メインの "DIV" 内にネスト "IMG" をアニメーション化することが可能であろう'background-image'を 'background-position'でアニメートする代わりに？画面がリサイズされたときに内部にあるdivを「塗りつぶす」イメージが必要で、「背景イメージ」でこれを達成することは頭を痛めています。

ご提案/アドバイスをいただければ幸いです。

（必要であれば、私は間違いなくJavascriptを/ jQueryのを使用するのではなくていないよ、単に私がやろうとしていることだけではCSSで可能であるかどうかを確認したかった）

Answer 1

あなたは、ビューポートユニットを使用してdiv要素のサイズをした場合、バックグラウンドサイズを設定してCSSで動作するようにし、応答性にしてください。

codepen

body { 
    background: #fff; 
} 

.logos { 
    width: 40vw; 
    height: 40vw; 
    margin: auto; 
    background: url('http://45.79.67.59/logo_thumb_bar.jpg'); 
    background-size: cover; 

} 

@keyframes play { 
    100% { background-position: 200vw; } 
} 
.logos:hover{ 
    -webkit-animation: notexistent; 
    animation: notexistent; 
    animation: play 2.5s steps(5) infinite; 
}