Question

我正在使用css动画，我有一系列带有不同css标签的动画。我从#water开始然后去其他动画然后我想回到#water用不同的动画。这是我的代码：

#water {
    position: relative;
    left: 48px;   
    z-index: 1;
    opacity: 0;
    width: 197px;
    -webkit-animation: squeez 2s 1s 1 forwards;
    -moz-animation: squeez 2s 1s 1 forwards;
    -o-animation: squeez 2s 1s 1 forwards;
    -webkit-animation: fadeOut 10s 10s 1 forwards;
    -moz-animation: fadeOut 10s 10s 1 forwards;
    -o-animation: fadeOut 10s 10s 1 forwards;
}

我不想这样做。代码无视第一个动画＆＃34; squeez＆＃34;并且只做动画＆＃34; fadeOut＆＃34;这让一切都搞砸了。关于如何使这项工作的任何想法？

Answer 1

您可以用逗号分隔动画，这样就可以：

-webkit-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-moz-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
-o-animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;
animation: squeez 2s 1s 1 forwards, fadeOut 10s 10s 1 forwards;

div {
  -webkit-animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
  animation: squeez 2s 1s forwards, fadeOut 10s 5s forwards;
  height: 100px;
  width: 100px;
  background: #F00;
}
@-webkit-keyframes squeez {
  from {
    width: 100px;
  }
  to {
    width: 20px;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes squeez {
  from {
    width: 100px;
  }
  to {
    width: 20px;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

<div>
</div>

如何在一个标签中有两个css动画

1 个答案: