title: Opera 9 (Presto 2.12) CSS tag compatibility with keyframe animation
body: <p>I'm trying to create a rotation animation effect that would run within an old version of an embedded Opera browser (Presto 12.2) on a Tivo receiver. CSS Calls such as "rotateY" don't render at all on the browser so I had to use the scale transform property to create the spinning illusion, however I'm now stuck with trying to change the background image within a keyframe animation (halfway down the keyframe animation at 50%, I would change the background image to something else). Everything works perfectly fine within Chrome, but due to restrictions with browser I was wondering if there is a work around out there as I've scoured the interwebs for a while and couldn't find a solution to my problem? I'm not experienced with javascript/jquery so everything is purely within CSS. Thank you all.</p>
  
  <p>Code:</p>
  
  <p>HTML part:</p>
  
  <pre><code>&lt;div style="position:absolute; TOP: 200px; LEFT: 200px" class ="scaling" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS part:</p>
  
  <pre><code>div {
    float: left;
    width: 61px;
    height: 68px;
    background-image: url('image1.gif');
    }
  
  
  .scaling{
      float: left;
      animation-name: scale1;
      animation-duration:1s;
      animation-iteration-count:infinite;
      animation-direction:alternate;
      animation-timing-function:steps(1, end);
  }
  
  @keyframes scale1{
              0%  {
                      transform:  scale(0.9, 1.0);
  
                  }
              10% {
                      transform:  scale(0.7, 1.0);
                  }
              20% {
                      transform:  scale(0.6, 1.0);
                  } 
              30% {
                      transform:  scale(0.4, 1.0);
                  }
              40% {
                      transform:  scale(0.2, 1.0);
                  }
              50% {
                      transform:  scale(0.1, 1.0);
                      background-image: url('image2.gif');
                  }
              60% {
                      transform:  scale(0.2, 1.0);
                      background-image: url('image2.gif');
                  }
              70% {
                      transform:  scale(0.4, 1.0);
                      background-image: url('image2.gif');
                  }
              80% {
                      transform:  scale(0.6, 1.0);
                      background-image: url('image2.gif');
                  }
              90% {
                      transform:  scale(0.7, 1.0);
                      background-image: url('image2.gif');
                  }
              100% {
                      transform:  scale(0.9, 1.0);
                      background-image: url('image2.gif');
                   }
  
      }
  </code></pre>