CODEWITHSUNDEEP
htmlcssweb
Jared Merritt
Jared Merritt

Reputation: 97

Scaling a CSS frame-by-frame animation (Save me!)

I was wondering if one of you could assist me with a CSS/HTML issue I am having.

I have a CSS based animation using the background and the steps() method. Unfortunately, this has meant scaling has been an issue.

Is there a way of simply scaling the div containing this to fit the screen? I don't mind the aspect ratio, that's not an issue. Here is my CSS for the animation:

    .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 ; }
}

I would really appreciate the assistance, this has been quite irritating.

Here is a gif of the issue: https://gyazo.com/91deb470a88b6066de9015beec5c0eed

I'd like for it to scale horizontally without showing upcoming frames of the animation.

Upvotes: 0

Views: 154

Answers (2)

Biepbot Von Stirling
Biepbot Von Stirling

Reputation: 346

Your biggest issue is that your image needs an aspect ratio that it is not. You can set its own aspect ratio by embedding it into another div and following something like here

I managed to make something that maintains the aspect ratio, but it isn't vertically centered when the height is smaller than the aspect ratio.

@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>

I don't know the layout of your page so I can't center the div for you vertically. How I did it

.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%);
}

Upvotes: 2

Jpsh
Jpsh

Reputation: 1726

Originally I misunderstood what you were trying to do. playing with this I found that you must scale it so the height is the largest dimension so it doesn't repeat horizontally. to add to the illusion I made the background black and centered it, also I reversed the order so it looked more explosiony to me.

you can also see it on 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>

Upvotes: 0

Related Questions