I have made this animated sprite sheet responsive but it does not keep its aspect ratio when I resize the window. It looks stretched.
How can I make it keep the same aspect ratio when the div is scaled so the animated sprite sheet becomes responsive ?
<style>
.gale-anim{
width:100%;
height:100%;
background:url('gale.png');
background-size:100% 500%;
animation:fly 0.7s steps(5) infinite;
}
#keyframes fly {
0%{ background-position: 0px 0px; }
100%{ background-position: 0px -500%; }
}
</style>
<div style="max-width:556px; max-height:448px;">
<div class="gale-anim"></div>
</div>
Related
I have a div and the width is 100%. It has a background image. I am doing a zoom in out effect with animation for the background image. So, it will continuously loop zooming in the background image and zooming out.
div {
background-image:url('images/home-background.webp');
background-attachment:fixed;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
display:flex;
align-items: center;
justify-content: center;
width:100%;
height:700px;
animation:topb 10s infinite alternate;
box-sizing:border-box;
padding:30px;
}
#keyframes topb {
0% {
background-size: 105%;
}
100% {
background-size: 100%;
}
}
This works perfectly but when I resize my screen, particularly below 1200px, I see the background image becomes smaller even the div is 100% width. When I remove the animation line, the background image works fine, covering the screen. Here is a screenshot how it looks on mobile devices. You will see the background image does not cover the screen entirely even width is 100%.
So, can someone help me why is this happening?
The Problem
This is happening because your animation is overriding the Background size attribute, thus it switches from
background-size: cover;
To
background-size: 105%:
Which will make the background 105% of the width
A Solution
Since we want the background to cover the div's area at all times, and we want it to have a scaling animation, we will need to be clever. To do this we are going to nest another div with our properly sized background image inside the first. Then we add overflow: hidden to the parent and add a scale animation to the second div (not the background-size attribute though)
Some Code
body{margin:0;padding:0;background-color:#2D2D2D;}
#background {
background-image: url(https://images.unsplash.com/photo-1439405326854-014607f694d7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80);
background-size: cover;
background-position:center center;
width:inherit;
height:inherit;
animation: scaleAnimation 1s infinite alternate;
position:absolute;
z-index:-1;
}
#parentDiv {
width: 100vw;
height: 500px;
overflow: hidden;
}
#parentDiv h1 {
text-align: center;
margin-top:100px;
}
#keyframes scaleAnimation {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<div id="parentDiv">
<div id="background"></div>
<h1>Heading 1</h1>
</div>
There are tons of horizontal scrolling backgrounds but that isn't my issue. Any time I create a vertical scroll using keyframes, the background image itself runs out, or it glitches out completely and starts the scroll effect over. That is not what I need. I need a seamless VERTICAL scrolling background that takes up the full width of the screen. There will be a container with the overflow hidden and it's background needs to scroll slowly upwards with a series of images that never glitches out, runs out etc. It needs to look like the one million examples of horizontal scrolling but vertically.
In the CSS is the actual dimensions of the image I am using. I am using a placeholder to start this conversation. Notice, even with the placeholder, the image just eventually stops.
Why does it do this with vertical scrolling, but typically not with horizontal? It doesn't make sense to me and there aren't many resources out there about vertical infinite scrolls of a background image, believe it or not.
If anyone has any recommendations, I will take it. JS or CSS whatever it is I am willing to listen and learn and understand why the f*** I can't figure this out. Thanks.
<div class="container">
<div class="sliding-background"></div>
</div>
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: 4980px;
width: 1440px;
animation: slide 30s linear infinite;
}
#keyframes slide{
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -100%, 0);
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
If you know the exact height of the image, this solution should work:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
--imageHeight: 900px;
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
height: calc(var(--imageHeight) * 2);
animation: slide 4s linear infinite;
}
#keyframes slide {
from {
transform: translateY(0px);
}
to {
transform: translateY(calc(var(--imageHeight) * -1));
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
If there is any confusion about the image height:
body {
margin: 0;
}
.container {
overflow: hidden;
height: 600px;
}
.sliding-background {
background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
-webkit-animation: bgScroll 600s linear infinite;
animation: bgScroll 600s linear infinite;
height: 100%;
background-size: cover;
position: relative;
}
#keyframes bgScroll{
0% {
background-position: 0 0;
}
100% {
background-position: 0 10000%;
}
}
<div class="container">
<div class="sliding-background"></div>
</div>
My image that is using #keyframes scales beyond my div="image-zoom". It zooms correctly but as it zooms within the div it goes outside and the horizontal slider increases.
HTML:
<section id="intro-section">
<div id="image-zoom">
<h1>WELCOME</h1>
</div> <!-- /.container -->
</section>
CSS:
#intro-section {
height: 400px;
width: 100%;
}
#image-zoom {
background-image: url(/img/fairy-bg.jpg);
background-size:100%;
position:relative;
top:237;
left:0;
width:100%;
height:400px;
animation: zoom 30s infinite;
padding: 0;
}
#keyframes zoom {
0% { transform:scale(1,1); }
50% { transform:scale(1.2,1.2); }
100% { transform:scale(1,1); }
}
I know it's simple but I can't see where the mistake is.
Try adding an overflow: hidden to the containing <div>
This is where the issue lies:
transform:scale(1.2,1.2)
The scale is more than the container size. (1 = container size)
I have a keyframe animation using CSS, and I would like to (automatically) make it centered for all resolutions, browsers, etc. I've tried doing margin: auto, etc. But that always results in my animation not working. Perhaps I am inserting it incorrectly, but I don't know. This is what I currently have, without any auto margins.
Here is my CSS code:
#image {
text-align:center;
width:276px;
position:absolute;
left:50%;
margin-left: -130px; /*this is what works for me, I'd imagine it's not */
margin-top: -240px; /*centered for everyone */
animation:dampe 0.3s infinite;
-webkit-animation:dampe 0.3s infinite;
}
#keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
#-webkit-keyframes image {
0% { top:45%; }
50% { top:50%; }
100% { top:45%; }
}
Here is my HTML code:
<div id="image">
<img src="image.png" />
</div>
By aligning the element using the margin-left property and offsetting by a fixed px value like in Joseph's solution you will not achieve a centered effect on all resolutions.
To achieve the centered effect on all resolutions offset your element by 50% from the left side and afterwards set the transform:translate3d(-50%,0,0). This will ensure that your element is always centered on the X axis, no matter the screen size.
/*CSS Markup*/
.centerX{
left:50%;
-webkit-transform:translate3d(-50%,0,0);
}
I have a background which exists of 3 images in total. However the middle background image (wrapper2) is visually 'between' two background images (wrapper1 and wrapper2).
When I try to rotate that middle image (wrapper2), the top-most image (wrapper3) also moves.
How can I prevent this, so that only the middle background-image (wrapper2) can rotate and not also the other one (wrapper3)?
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<!-- blabla -->
</div>
</div>
</div>
#wrapper1 {
background-image: url("../media/bg1.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper2 {
background-image: url("../media/bg2.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper3 {
background-image: url("../media/bg3.png");
background-size: 300px 200px;
background-repeat: no-repeat;
}
#wrapper2:hover
{
animation: TestAnim;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#keyframes TestAnim
{
0% { transform:rotate(0deg); }
25% { transform:rotate(-4deg); }
100% { transform:rotate(0deg); }
}
}
ok, wasn't possible the way I worked.
I could either position the divs (absolute/relative) and make them siblings instead of childs.
But i've choosen to create a sprite image of all the rotations that I wanted and using an css3 animation.
In the CSS keyframes animation I move the background position every time:
0% { background-position: 0 0; width: 300px; height: 200px; }
1% { background-position: 0 -200px; width: 300px; height: 200px; }
...
Important is that you have to define the step-start!
animation-timing-function: step-start;
This step-start works fine in Internet Explorer 10.
Remark: For older browsers, the animation will not work (CSS3 is not known or step-start is not known) and your first sprite will be displayed, so make sure your first sprite is your initial state.
For your information: I used The GIMP to create my animation and used a plugin called CSS WebSprites to automatically generate my sprites and CSS code:
The GIMP CSS WebSprites plugin