Opera 9 (Presto 2.12) CSS 프레임과 키 프레임 애니메이션의 호환성

Question

Tivo 수신기에서 이전 버전의 임베디드 Opera 브라우저 (Presto 12.2)에서 실행되는 회전 애니메이션 효과를 만들려고합니다. "rotateY"와 같은 CSS 호출은 브라우저에서 전혀 렌더링되지 않으므로 회전 변형을 사용하여 스케일링 변형 속성을 사용하여 키 프레임 애니메이션 내에서 배경 이미지를 변경하려고했습니다. 키 프레임 애니메이션을 50 %로 낮추면 배경 이미지를 다른 것으로 바꿀 것입니다.) 모든 것이 크롬 내에서 완벽하게 작동하지만 브라우저 제한으로 인해 잠시 interwebs를 훑어보고 내 문제에 대한 해결책을 찾을 수 없기 때문에 해결 방법이 있는지 궁금합니다. 나는 자바 스크립트/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

. 하나의 이미지는 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);} 
}