缩放 CSS 逐帧动画（救救我！）

Question

我想知道你们是否可以帮助我解决我遇到的 CSS/HTML 问题。

我有一个使用背景和 steps() 方法的基于 CSS 的动画。不幸的是，这意味着扩展成为一个问题。

有没有办法简单地缩放包含它的 div 以适应屏幕？我不介意长宽比，这不是问题。这是我的动画 CSS：

    .pageOpen {
  width: 710.956522px;
  height: 400px;
  background: url('/Images/SiteVitalImages/preloader-open.png') left center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: play 1s steps(22) infinite;
}

@keyframes play {
    100% { background-position: right ; }
}

非常感谢您的帮助，这很烦人。

这是问题的 gif 图像： https://gyazo.com/91deb470a88b6066de9015beec5c0eed

我希望它水平缩放而不显示即将到来的动画帧。

Answer 1

您最大的问题是您的图像需要一个宽高比，而事实并非如此。您可以通过将其嵌入另一个 div 并遵循 here 之类的内容来设置自己的宽高比

我设法制作了保持纵横比的东西，但是当高度小于纵横比时，它不会垂直居中。

@keyframes play {
  100% {
    background-position: center left;
  }
}

body,
html {
  /* To be fair, these should always be disabled to prevent unexpected padding or margin or movements*/
  padding: 0;
  margin: 0;
}

.center {
  position: absolute;
}

.center.y {
  top: 0; bottom: 0; /* vertical center */
}

.center.x {
  left: 0; right: 0; /* horizontal center */
  margin: auto;
}

.lock.height {
  max-height: 100vh;
  height: 100vh;
}

.lock.width {
  max-width: 100vw;
  width: 100vw;
}

.flow-background-container {
  overflow: hidden;
  position: relative;
}

.flow-background {
  padding-top: 56.338%;
  /* For the 400/710 aspect ratio*/
  background: url('https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png') no-repeat center right;
  /* several types for more support. IE9+ http://caniuse.com/#feat=background-img-opts */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: play 1.5s steps(22) infinite;
}

<div class="flow-background-container lock height">
  <div class="flow-background center x y">
  </div>
</div>

我不知道您的页面布局，所以我无法为您垂直居中 div。 我是怎么做到的

.center-vertically {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-khtml-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 2

最初我误解了你想要做什么。玩这个我发现你必须缩放它，所以高度是最大的尺寸，所以它不会水平重复。为了增加这种错觉，我将背景设置为黑色并将其居中，我还颠倒了顺序，使其看起来更加爆炸。

你也可以在 jsfiddle https://jsfiddle.net/j7L4amov/11/看到它

html, body{ 
  height: 100%;
  background-color: black;
 }
 
.wrapper{
  position: relative;
  margin: auto;
  min-height: 400px;
  height: 100%;
  min-width: 710px;
  width:  calc( 100vh * 16.0 / 9.0 );
}

.pageOpen {
  min-height: 400px;
  min-width: 710px;
  height: 100%;
  width: 100%;
 background: url('https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png') no-repeat right center;
 background-size: cover;
 animation: play 1.5s steps(22) infinite;
 overflow: hidden;
}

@keyframes play {
    100% {
      background-position: left center; 
    }
}

<div class=wrapper>
<div class=pageOpen>
</div>
</div>