css - @keyframes属性使用许多 Action

有人可以解释一下扩展旋转如何在一个@keyframes中工作吗？我能理解轻松的动作，但对一个@keyframe保持几转并不容易理解。

为了更好地说明这一点，我为两个选项都编写了@keyframes：

选项A

@keyframes optionA1 {
  from {
    transform: rotateX(-20deg) rotateY(-30deg);
  }
  to {
    transform: rotateX(-20deg)  rotate(-30deg);
  }
}

@keyframes optionA2 {
  from {
    transform: rotateX(-20deg)  rotate(-30deg);
  }
  to {
    transform:  rotateX(-50deg) rotateZ(30deg) ;
  }
}

对象的动画：optionA1（0-5s）optionA2（5-10s）

选项B：

@keyframes optionB {
  from {
    transform: rotateX(-20deg) rotateY(-30deg);
  }
  to {
    transform: rotateX(-20deg)  rotate(-30deg)
    rotateX(-50deg) rotateZ(30deg) ;
  }
}

对象的动画：optionB（0-10秒）

当我在关键帧中使用相同的运动时，为什么我的对象没有运动？

我应该如何阅读选项b关键帧中包含的运动？

我该如何为对象的动画编写选项B，使其与选项A中的动画相同，但是第一步-我不希望运动暂时停止吗？

最佳答案

尝试将您的最后一步分为两个步骤：

@keyframes optionB {
  0% {
    transform: rotateX(-20deg) rotateY(-30deg); //start position
  }

  50% {
    transform: rotateX(-20deg)  rotate(-30deg); //5 sec

  }

  100% {
    transform: rotateX(-50deg) rotateZ(30deg) ; //final position
  }

}

关于css - @keyframes属性使用许多 Action ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57231435/