Background-image in keyframe does not display in Firefox or Internet Explorer

Becky

I have several animations on my site that I just realized do not even show up in Firefox or Internet Explorer. I have the background-image within the keyframes. I do this because I have different images in different percentages with the animation.

Why doesn't the background-image display within the keyframes in Firefox and Internet Explorer and is there a way to make this work?

Harry

As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying the background image, Firefox and IE seem to do nothing.

The below quote found in an article at oli.jp provides some interesting information:

While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.

On the face of it, it looks like Firefox and IE are handling it correctly while Chrome is not. But, it is not so simple. Firefox seems to contradict itself when it comes to how it handles transition on background image as opposed to animation. While transitioning background-image, it shows up the second image immediately (hover the first div in the snippet) whereas while animating, the second image doesn't get displayed at all (hover the second div in the snippet).

So, conclusion is that it is better to not set background-image inside keyframes. Instead, we have to use background-position or opacity like specified @ oli.jp.

div {
  background-image: url(https://placehold.it/100x100);
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
}
div:nth-of-type(1) {
  transition: background-image 1s ease;
}
div:nth-of-type(1):hover {
  background-image: url(https://placehold.it/100/123456/ffffff);
}
div:nth-of-type(2):hover {
  animation: show-img 1s ease forwards;
}
@keyframes show-img {
  to {
    background-image: url(https://placehold.it/100/123456/ffffff);
  }
}
<div></div>
<div></div>


If you have multiple images that should be shown at different percentages within the keyframe then it would be a better idea to add all those images on the element at start and animate their position like in the below snippet. This works the same way in Firefox, Chrome and IE.

div {
  background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
}
div:hover {
  animation: show-img 1s steps(1) forwards;
}
@keyframes show-img {
  to {
    background-position: -100px 0px, 0px 0px;
  }
}
<div></div>

Or, like in the below snippet. Basically each image is the same size as the container as background-size is set as 100% 100% but only one image is shown at any given time because of them being the same size as container. Between 0% to 50% the first image is shown because it is at 0px,0px (left-top) whereas the second image is at 100px,0px (outside the right border). At 50.1%, the first image is at -100px,0px (outside left border) and second image is at 0px,0px and so it is visible.

div {
  background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);
  background-size: 100% 100%; /* each image will be 100px x 100px */
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
  animation: show-img 5s ease forwards;
}
@keyframes show-img {
  0%, 50%{
    background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
  }
  50.1%, 100% {
    background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
  }
}
<div></div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

svg background image position is always centered in internet explorer, despite background-position: left center;

From Dev

Does Internet Explorer and Firefox support @media page?

From Dev

Why does the MTurk sandbox only display my HITs in Internet Explorer?

From Dev

Internet Explorer bicubic background image rescaling

From Dev

Internet Explorer 11 Not allowing calculation within @keyframe

From Dev

Display Internet Options like Internet Explorer

From Dev

Why is my image onload not firing in Firefox and Internet Explorer?

From Dev

background-image gets padded in Internet Explorer

From Dev

Web safe colors that will work with Internet Explorer, Firefox, and Chrome. Background color is not working in IE within CSS

From Dev

Internet Explorer pseudo elements with background image

From Dev

Submit button does not appear in Firefox but on Chrome and Internet Explorer

From Dev

Background-image css does not display

From Dev

Save Canvas as Image Internet Explorer

From Dev

Large repeating background image in Internet Explorer

From Dev

Background image does not render in firefox

From Dev

Image fadeIn not working with Internet Explorer or Firefox

From Dev

Firefox does not display table-row as Chrome and Internet Explorer

From Dev

svg background image position is always centered in internet explorer, despite background-position: left center;

From Dev

Images not loading in Firefox and Internet Explorer

From Dev

Firefox and Internet Explorer display garbage instead of a specific site

From Dev

Internet Explorer 9 Display Issues

From Dev

Why is my image onload not firing in Firefox and Internet Explorer?

From Dev

content not working in firefox and internet explorer?

From Dev

CSS missing on Internet Explorer and Firefox

From Dev

Internet Explorer does not display pages properly: ignoring CSS?

From Dev

JavaScript does not work in internet explorer and Firefox but works in Google

From Dev

Firefox does not display table-row as Chrome and Internet Explorer

From Dev

Google chrome/ Internet explorer do not accept self signed, Firefox does

From Dev

Unwanted sticky background image on keyframe animation

Related Related

  1. 1

    svg background image position is always centered in internet explorer, despite background-position: left center;

  2. 2

    Does Internet Explorer and Firefox support @media page?

  3. 3

    Why does the MTurk sandbox only display my HITs in Internet Explorer?

  4. 4

    Internet Explorer bicubic background image rescaling

  5. 5

    Internet Explorer 11 Not allowing calculation within @keyframe

  6. 6

    Display Internet Options like Internet Explorer

  7. 7

    Why is my image onload not firing in Firefox and Internet Explorer?

  8. 8

    background-image gets padded in Internet Explorer

  9. 9

    Web safe colors that will work with Internet Explorer, Firefox, and Chrome. Background color is not working in IE within CSS

  10. 10

    Internet Explorer pseudo elements with background image

  11. 11

    Submit button does not appear in Firefox but on Chrome and Internet Explorer

  12. 12

    Background-image css does not display

  13. 13

    Save Canvas as Image Internet Explorer

  14. 14

    Large repeating background image in Internet Explorer

  15. 15

    Background image does not render in firefox

  16. 16

    Image fadeIn not working with Internet Explorer or Firefox

  17. 17

    Firefox does not display table-row as Chrome and Internet Explorer

  18. 18

    svg background image position is always centered in internet explorer, despite background-position: left center;

  19. 19

    Images not loading in Firefox and Internet Explorer

  20. 20

    Firefox and Internet Explorer display garbage instead of a specific site

  21. 21

    Internet Explorer 9 Display Issues

  22. 22

    Why is my image onload not firing in Firefox and Internet Explorer?

  23. 23

    content not working in firefox and internet explorer?

  24. 24

    CSS missing on Internet Explorer and Firefox

  25. 25

    Internet Explorer does not display pages properly: ignoring CSS?

  26. 26

    JavaScript does not work in internet explorer and Firefox but works in Google

  27. 27

    Firefox does not display table-row as Chrome and Internet Explorer

  28. 28

    Google chrome/ Internet explorer do not accept self signed, Firefox does

  29. 29

    Unwanted sticky background image on keyframe animation

HotTag

Archive