CODEWITHSUNDEEP
csstransitioncss-animations
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Replace @keyframes in css with transitions

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).

Upvotes: 0

Views: 861

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

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

Upvotes: 1

Related Questions