0

@ を使用したセキュリティ上の理由から、私が働いていたプラットフォームは @keyframes をサポートしていません。私の質問は、それを他の CSS トリックに置き換えることができるかどうかです。たとえば、次のコードがあります。

.cubo {
animation:giro 25s infinite linear;
}
@keyframes giro {
  0% {transform: rotateX(0deg)   rotateY(0deg);}
  100% {transform: rotateX(1080deg) rotateY(360deg);
  }
}

@ の使用を避けるためにトランジションまたはトランスフォームに置き換えることはできますか? （JavaScriptもサポートされていません）。

4

1 に答える 1

1

代わりに、トランジションの期間、rotateX、およびrotateY値をすべて共通の係数で乗算しx、ページの読み込み時にトランジション クラスを適用することでトランジションにすることができます。私の例では、それらを 40 倍しましたが、好きなだけ高くすることができますが、プロセッサがある時点で過負荷になり、ページが壊れる可能性があるため、あまり高くしません。これは 1000 秒間実行され、それを過ぎてページに留まる人は多くありません

これがそのアプローチのライブデモです

/* CSS */
.cubo {
    /* ...Your other code... */
    transition: all 1000s linear;    
}
.animate { 
    -webkit-transform: rotateX(43200deg) rotateY(14400deg);
    -moz-transform: rotateX(43200deg) rotateY(14400deg);
    -o-transform: rotateX(43200deg) rotateY(14400deg);
    -ms-transform: rotateX(43200deg) rotateY(14400deg);
    transform: rotateX(43200deg) rotateY(14400deg); 
}

/* Javascript (ran on page load) */
document.getElementsByClassName('cubo')[0].classList.add('animate');
于 2013-09-02T14:30:17.190 に答える