CODEWITHSUNDEEP
htmlcssanimationcss-animations
user9389057
user9389057

Reputation:

how to make an animation run on png images in css?

I have created an animation script on a png image that is animateCloud, the animation has worked, but the image does not connect, I want to make the picture does not break at all like there is a repeat in the picture please help how to code?

this is my code

<img class="img-baby-g-about for-desktop" src="assets/images/img-desktop-about.png" alt="baby g bga-240 about" width="100%">

and this is my css


    @-webkit-keyframes animateCloud {0% {margin-left: -100px;}100% {margin-left: 100%;}}
    @-moz-keyframes animateCloud {0% {margin-left: -1000px;}100% {margin-left: 100%;}}
    @keyframes animateCloud  {0% {margin-left: -1000px;}100% {margin-left: 100%;}}

    .img-baby-g-about {
    -webkit-animation: animateCloud 10s linear infinite;
    -moz-animation: animateCloud 10s linear infinite;
    animation: animateCloud 10s linear infinite;}

I mean my animation runs and will clear the page, but what I want is that the image does not empty the page

Upvotes: 0

Views: 14032

Answers (3)

Veneseme Tyras
Veneseme Tyras

Reputation: 606

If you want to do this with an <img> element, it must be fairly tricky. You will have to use at least two elements, positioning will be tricky and it would be rather difficult to make it be responsive.

I would recommend that you use a background-image for this because background-repeat is perfectly suited to this sort of thing. If you really want to have an actual <img> tag for content/seo purposes or something, then I suggest that background-image is still the way to animate it, and just push the real image into nowhere with negative padding hacks.

Here is how to do it with background image:

.img-baby-g-about {
  width: 100%;
  height: 327px;
  animation: animateCloud 10s linear infinite;
  background-image: url(https://i.postimg.cc/T1nt9ZLk/Lv8L0.png);
  background-repeat: repeat-x;
  background position: 0 0;
}
    
@keyframes animateCloud  {0% {background position: 0 0;}100% {background-position: 1280px 0;}}
<div class="img-baby-g-about"></div>

Considerations:

  1. I set the height of the element to 327px because that is the height of the image (the image host resized it). We could use background-size to change that, or even use percentages to scale the image, but then the animation would have to be adjusted to also use percentages to accommodate and that will be a little tricky due to how background-position is relative to both the image and the container (see below).

  2. I set the 100% animation frame to position: 1280px 0; because the image is 1280px wide (image host ressized it).

  3. Your original image was 2560x654 (the image host automatically scaled it). So to to use your image you should change the relevant pixel dimensions above.

Responsive Solution

So to make this more responsive, and less dependent on the image dimensions lets use percentages to scale and animate the background image, this way you won't need to change it suit different pixel dimensions for different images.

We can't use 100% though, because if we do, background-position becomes useless, because of how background position is relative to both the image and the container, if they are the same, then all points are equivalent, and no shifting can occur. So we'll use 110% for background-size. Then to actually move the image the full width of the image, we will work with the 10% difference between the container and the image, so 110%(the image) x 10(the difference) is 1100%. So that is the amount we shift the background image to move it across it's full width.

I made the container 100% window height and stuck the animation to the bottom of the container. You could adjust that to suit your requirements.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.img-baby-g-about {
  width: 100%;
  height: 100%;
  animation: animateCloud 10s linear infinite;
  background-image: url(https://i.postimg.cc/T1nt9ZLk/Lv8L0.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 110%;
}
    
@keyframes animateCloud  {0% {background-position: 1100% bottom;}100% {background-position: 0% bottom;}}
<div class="img-baby-g-about"></div>

Upvotes: 4

Hanuman Sahay
Hanuman Sahay

Reputation: 29

For this, you have to divide your image into multiple images, like Cloud-image, Car and rest of background. Then make CSS animation like this.

<code>https://codepen.io/HanumanSahay/pen/QWWPEZz?editors=1100</code>

Upvotes: 0

Christian Meyer
Christian Meyer

Reputation: 1771

I would suggest using the background-image in combination with the background-position and repeat. When you really want to use the img tag for this I would say you need some JavaScript but you are asking for a css solution here you go:

@-webkit-keyframes animateCloud {
0% {background-position: -100% 0; }
100% {background-position: 100% 0;}
}
@-moz-keyframes animateCloud {
0% {background-position: -1000px 0;}
100% {background-position: 100% 0;}
}
@keyframes animateCloud  {
0% {background-position: -1000px 0;}
100% {background-position: 100% 0;}
}

.img-baby-g-about {
background-image: url("https://icon-library.net/images/icon-cloud/icon-cloud-4.jpg");
background-repeat: repeat-x;
-webkit-animation: animateCloud 10s linear infinite;
-moz-animation: animateCloud 10s linear infinite;
animation: animateCloud 10s linear infinite;
}

Here is a working Fiddle. https://jsfiddle.net/qk1hdeg0/14/

Upvotes: 0

Related Questions