在同一元素上使用多个动画时定义动画方向

Question

我有这个：

.about5 {
  animation: fade 4s ease forwards, warp 1s linear;
  animation-delay: 2s;
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(95deg);
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes warp {
  50% {
    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }
}

<div class="about5">About</div>

<div class="about">About text etc</div>

为什么，当我用逗号分隔多个动画时，第二个动画会：

@keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) 
rotateZ(29deg) rotateY(-180deg);
}
}

@media (min-width: 768px) {.about {
animation: 
spin 20s linear infinite, warp 2s linear infinite; animation. 
delay: 4s;}} 

不生效？

我希望 aboutelement 旋转和 translateZ 但它不起作用。这是因为逗号在错误的地方吗？

Answer 1

没问题，你的问题肯定出在别的地方了：

.about5 {
  animation: fade 16s ease forwards infinite, warp 4s linear infinite;
  animation-delay: 2s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes warp {
  50% {
    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }

<div class="about5">About</div>
<div class="about">About text etc</div>