javascript - 可以使用 CSS 为嵌套图像设置动画吗？

Question

我创建了一个 block ，当您仅使用 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”设置动画，而不是使用“背景位置”为“背景图像”设置动画？当屏幕调整大小时，我需要图像来“填充”它所在的 div，而使用“背景图像”实现这一点一直令人头疼。

任何建议/意见将不胜感激!

(我绝对不反对在必要时使用 Javascript/jQuery，只是想看看单独使用 CSS 是否可以实现我正在尝试做的事情)

Answer 1

如果您使用视口(viewport)单位调整 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;
}