html - Opera 9 (Presto 2.12) CSS 标签与关键帧动画的兼容性

Question

我正在尝试创建一个旋转动画效果，该效果将在 Tivo 接收器上的旧版本嵌入式 Opera 浏览器 (Presto 12.2) 中运行。诸如“rotateY”之类的 CSS 调用根本不会在浏览器上呈现，因此我不得不使用缩放变换属性来创建旋转幻觉，但是我现在一直在尝试更改关键帧动画中的背景图像(中途将关键帧动画调低 50%，我会将背景图片更改为其他图片)。在 Chrome 中一切都运行良好，但由于浏览器的限制，我想知道是否有解决办法，因为我已经搜索了一段时间的互联网，但找不到解决我的问题的方法？我没有使用 javascript/jquery 的经验，所以一切都纯粹在 CSS 中。谢谢大家。

代码:

HTML 部分:

<div style="position:absolute; TOP: 200px; LEFT: 200px" class ="scaling" ></div>

CSS 部分:

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');
                 }

    }

Answer 1

求助于使用 scale-transform 选项来创建适用于目标浏览器的旋转效果。一张图片将从 1.0, 1.0 缩放到 0.025, 1.0，另一张图片将从 0.025, 1.0 缩放到 1.0, 1.0。

@keyframes scaleBigToSmall{
    from {transform: scale(1.0, 1.0);}
    to {transform: scale(0, 1.0);}
}                       

@keyframes scaleSmallToBig{
    from {transform: scale(0, 1.0);}
    to {transform: scale(1.0, 1.0);}
}