可以使用 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-position”为“background-image”设置动画？当屏幕被调整大小时，我需要图像来“填充”它所在的 div，而使用“背景图像”来实现这一点令人头疼。

任何建议/建议将不胜感激！

（如果有必要，我绝对不反对使用 Javascript/jQuery，只是想看看我正在尝试做的事情是否可以单独使用 CSS）

Answer 1

如果您使用视口单位调整 div 的大小，并设置 background-size 以覆盖它，那么它应该可以使用 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;
}