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

Question

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>

Answer 1

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: