CODEWITHSUNDEEP
cssinternet-explorer-11background-image
Sam
Sam

Reputation: 2093

Background Image not showing in Internet Explorer at the end of an animation

I've tried a few things on this, like switching out the svg for a png, I've stared at my formatting and can't see anything wrong with it, I'm not coming up with anything. I'm wondering if the CSS animation is maybe interfering with it somehow?

Here's the website with it working in other browsers, on Internet Explorer 11 the circle just remains a yellow circle at the end of the animation.

#rosette {
  z-index: 99;
  position: absolute;
  background-color: crimson;
  height: 100vh;
  width: 100vw;
  animation: rosette-anim 5s;
  animation-fill-mode: forwards;
  content: "";
  transform-style: preserve-3d;
  background: rgb(51, 55, 56);
  top: 0px;
  right: 0px;
  transform: rotateY(0.5turn);
}

@keyframes rosette-anim {
  95% {
    position: absolute;
    background: rgb(51, 55, 56);
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(2turn);
    top: 4px;
    right: 20px;
  }
  100% {
    position: absolute;
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(3turn);
    background: rgb(164, 132, 60) url('https://www.pottertour.co.uk/imagesAwards/lux-life-award-transparent-min.svg');
    background-size: 139px 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    top: 4px;
    right: 26px;
  }
}
<div id="rosette"></div>

Upvotes: 0

Views: 105

Answers (2)

Yu Zhou
Yu Zhou

Reputation: 12999

Animation and transition for pseudo-elements is not supported by IE11. You could create <div> and use ID to write CSS for it and avoid using pseudo. The sample code is like below:

#rosette {
  z-index: 99;
  position: absolute;
  background-color: crimson;
  height: 100vh;
  width: 100vw;
  animation: rosette-anim 5s;
  animation-fill-mode: forwards;
  content: "";
  transform-style: preserve-3d;
  background: rgb(51, 55, 56);
  top: 0px;
  right: 0px;
  transform: rotateY(0.5turn);
}

@keyframes rosette-anim {
  95% {
    position: absolute;
    background: rgb(51, 55, 56);
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(2turn);
    top: 4px;
    right: 20px;
  }
  100% {
    position: absolute;
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(3turn);
    background: rgb(164, 132, 60);
    background-size: 139px 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    top: 4px;
    right: 26px;
  }
}

#before {
  content: '';
  position: absolute;
  border-bottom: 90px solid rgb(164, 132, 60);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  top: 95px;
  right: 80px;
  transform: translateZ(-1px) rotate(-140deg);
  opacity: 0;
  z-index: -1;
  animation: change 5s;
  animation-fill-mode: forwards;
}

#after {
  content: '';
  position: absolute;
  border-bottom: 90px solid rgb(164, 132, 60);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  top: 95px;
  left: auto;
  right: 10px;
  transform: translateZ(-1px) rotate(140deg);
  opacity: 0;
  z-index: -1;
  animation: change 5s;
  animation-fill-mode: forwards;
}

@keyframes change {
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div id="rosette"><img src="https://www.pottertour.co.uk/imagesAwards/lux-life-award-transparent-min.svg" id="award" alt="My private Harry Potter tours won Lux Life magazine&#39;s award for best pop culture tour Edinburgh, they anointed it &#39;Truly magical&#39;, bless them."
  /></div>
<div id="before"></div>
<div id="after"></div>

Result in IE11:

enter image description here

Upvotes: 1

doğukan
doğukan

Reputation: 27481

I used ::before pseudo element for background-image and I wrote another keyframe animation for animate ::before element. This works in IE11.

#rosette {
  z-index: 99;
  position: absolute;
  background-color: crimson;
  height: 100vh;
  width: 100vw;
  animation: rosette-anim 5s;
  animation-fill-mode: forwards;
  transform-style: preserve-3d;
  background: rgb(51, 55, 56);
  top: 0px;
  right: 0px;
  transform: rotateY(0.5turn);
}

#rosette:before {
  content: "";
  background-image: url('https://www.pottertour.co.uk/imagesAwards/lux-life-award-transparent-min.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* visibility: hidden; */
  animation: rosette-before 5s;
  animation-fill-mode: forwards;
  display: inline-block;
  height: 100%;
  position: absolute;
  width: 100%;
  opacity: 0;
}

@keyframes rosette-anim {
  95% {
    position: absolute;
    background: rgb(51, 55, 56);
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(2turn);
    top: 4px;
    right: 20px;
  }
  to {
    position: absolute;
    height: 137px;
    width: 142px;
    border-radius: 70px;
    transform: rotateY(3turn);
    background-color: rgb(164, 132, 60);
    z-index: 1;
    top: 4px;
    right: 26px;
  }
}

@keyframes rosette-before {
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div id="rosette"></div>

Upvotes: 0

Related Questions