用过渡替换CSS中的@keyframes

Question

The platform were I work does not support @keyframes because of security reasons with the @. My question is if I can replace it with some other css trick. For example I have this code:

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

Can I replace it with transitions or transforms to avoid using the @? (no javascript supported either).

Answer 1

You could instead make it a transition by multiplying the transition duration, rotateX , and rotateY values all by a common factor x and applying the transition class on page load. In my example I multiplied them by 40, but you can go as high as you want but I wouldn't go too high because the processor might overload at some point and break the page. This runs for 1000 seconds, not many people will stay on a page past that

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