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 回答