用过渡替换 css 中的 @keyframes

【问题标题】：Replace @keyframes in css with transitions用过渡替换 css 中的 @keyframes
【发布时间】：2013-09-11 11:33:35
【问题描述】：

由于@的安全原因，我工作的平台不支持@keyframes。我的问题是我是否可以用其他一些 css 技巧替换它。例如我有这个代码：

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

我可以用转换或变换替换它以避免使用@吗？（也不支持 javascript）。

【问题讨论】：

好吧，如果没有用户与元素交互，即:hover，您将无法运行过渡 - 而且您也无法像使用动画一样无限运行它，所以我会说这可能是不可能的。
@Adrift CSS 没有什么是不可能的！
哪个是平台？
您的问题最终解决了吗？

标签： css transition css-animations

【解决方案1】：

您可以通过将转换持续时间、rotateX 和 rotateY 值全部乘以公因子 x 并在页面加载时应用转换类来使其成为转换。在我的示例中，我将它们乘以 40，但您可以随心所欲地提高，但我不会太高，因为处理器可能会在某些时候过载并破坏页面。这运行了 1000 秒，没有多少人会停留在超过 1000 秒的页面上

Here is a live demo of that approach

/* 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');

【讨论】：