How To Animate Some Parts Of An Image Using Css?

January 30, 2024 Post a Comment

I have an image and I want to animate some parts of it using CSS. So, I got a question: Can I animate some parts of an image with AutoPlay? I mean after some period of time it sh

Solution 1:

Using only a single HTML element and CSS (and an optional background image)

It looks like these, but smoother!

GIF Example with images - with images

GIF Example - with no images (further styling needed)

Compatibility:IE10+ and all modern browsers. Chrome currently requires the -webkit- prefix.

The Text

The text inside the <h6> is hidden with text-indent: -9999px
The text shown is created with 2 pseudo element children of the h6 parent, :before and :after
The pseudo element children are hidden outside the parent thanks to overflow: hidden and left:100% / right:101%(the extra one percent hides the borders edge)
The "hours" text animation is delayed by 2 seconds

Inside the Keyframes

At 10% the "24" text is rotated 180 degrees
At 25% to 95% the "24" and "hours" text is moved to the centre with transform: translateX
At 100% the text is moved back outside with transform: translateX(0) and the "24" is rolled out with rotate(180deg)

Complete Example

Using background images

h6 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 30px;
  text-indent: -9999px
}
h6:before,
h6:after {
  position: absolute;
  text-indent: 0;
}
h6:before {
  content: '';
  background: url(http://i.stack.imgur.com/Ad9Tn.png) no-repeat;
  width: 25px;
  height: 25px;
  right: 101%;
  top: -3px; /*just for this example*/
  -webkit-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}
h6:after {
  content: '';
  background: url(http://i.stack.imgur.com/VT4GI.png) no-repeat;
  left: 100%;
  width: 100px;
  height: 100px;
  -webkit-animation: slide 10s2s infinite linear;
  animation: slide 10s2s infinite linear;
}
@-webkit-keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  20%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@-webkit-keyframes slide {
  10%, 75% {
    transform: translateX(-50px);
  }
  80% {
    transform: translateX(0);
  }
}
@keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  10%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@keyframes slide {
  20%, 75% {
    transform: translateX(-50px);
  }
  80% {
    transform: translateX(0);
  }
}

<h6>24 Hours</h6>

Using no images

h6 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 30px;
  text-indent: -9999px
}
h6:before,
h6:after {
  position: absolute;
  text-indent: 0;
}
h6:before {
  content: '24';
  right: 101%;
  border: solid 2px#000;
  border-radius: 50%;
  padding: 4px;
  width: 10px;
  height: 10px;
  line-height: 10px;
  -webkit-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}
h6:after {
  content: 'hours';
  left: 100%;
  width: 10px;
  height: 10px;
  line-height: 20px;
  -webkit-animation: slide 10s2s infinite linear;
  animation: slide 10s2s infinite linear;
}
@-webkit-keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  20%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@-webkit-keyframes slide {
  10%,
  75% {
    transform: translateX(-45px);
  }
  80% {
    transform: translateX(0);
  }
}
@keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  10%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@keyframes slide {
  20%,
  75% {
    transform: translateX(-45px);
  }
  80% {
    transform: translateX(0);
  }
}

<h6>24 Hours</h6>

Solution 2:

CSS isn't going to do it. Probably the best option is to simply create a .gif using a program like photoshop

Solution 3:

You could animate everything together if you either cut out the individual elements as individual images and then position them accordingly inside a container, then animate the individual images the way you want to.

Or if you have access to the vector file, you can use SVG for each element of the image for the animation. This way you can more easily cut an element and paste it as code in your HTML.

So yes you can but only if you cut the image into individual pieces and animate these.

EDIT://

Yes you can add an AutoPlay. You can do this using CSS Keyframes (link)

SVG is vector based graphics that is fairly new to the web. Since SVG is vector based it can be resized to any size whilst keeping the resolution. If you want to know more about vector graphics and SVG, you can look here.

The only reason I mentioned SVG is because it's a bit easier to use since it's similar to HTML and each element in a SVG can be used as a selector in both CSS and Javascript(jQuery) for changing style and or animate it.

Html5 Dictionary