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;}}

不生效吗？

我希望about元素旋转并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>

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

1 个答案: