1

I'd like to animate the rotation of one coordinate with the ease function, and another with linear - is there a way to do that? At the moment, only one of the animations get applied, as the transform of one animation overrides the other.

.square {
  width: 100px;
  height: 100px;
  background: black;
  animation: downward 4s ease infinite, sideward 4s linear infinite;
}

@keyframes downward {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}
@keyframes sideward {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
<div class="square" />
Patris
  • 75
  • 1
  • 6
  • can you explain more visually what you are looking for? – GMAC Feb 18 '22 at 10:00
  • @GauravGupta It's not very easy to explain visually. I'm trying to make a shape turn on it's Y axis infitely (which is a linear transition). At the beginning of this animation, I also want the shape to rotate the X axis from 0 to a certain position and stay in that X position (this would be the ease transition), while the Y keeps rotating. – Patris Feb 18 '22 at 14:22

0 Answers0