Question

我想让这个矩形淡入，然后播放第二个动画？但是目前它没有淡入，只需几秒钟就可以播放第二个动画。

HTML CODE：

<div class="rectangle firstAnimation thirdAnimation"></div>

CSS代码：

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.rectangle {
    position:fixed;
    width: 300px;
    height: 36px;
    opacity:0.8;
    margin-top:215px;
    background: #212e84;
    z-index:1;
}
.firstAnimation {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}
@-webkit-keyframes movingbox {
    0% {
        left:0px;
    }
    100% {
        left:-157px;
    }
}
.thirdAnimation {
    animation-name: movingbox;
    -webkit-animation-name: movingbox;
    -moz-animation-name: movingbox;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -moz-animation-delay: 4s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

Answer 1

您不能在CSS中的两个不同选择器下设置两个不同的动画，因为最新（或更具体）的声明会覆盖前一个。

将动画应用于单个元素的方法是将逗号分隔值设置为animation设置，如下所示：

.thirdAnimation {
    animation-name: movingbox, fadeIn; /* specify multiple animations in CSV format */
    animation-delay: 4s, 0s; /* first value is delay for 1st animation, next is for 2nd */
    animation-duration: 3s; /* when only one value is provided, the same applies for both animations */
    animation-fill-mode: forwards;
}

将animation-delay设置为0s作为fadeIn动画将使其立即启动而animation-duration为3s意味着它将在移动框动画开始之前完成（之后） 4s延迟）。您可以根据需要使用animation-delay和animation-duration。

＆＃13;

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes movingbox {
  0% {
    left: 0px;
  }
  100% {
    left: -157px;
  }
}
.rectangle {
  position: fixed;
  width: 300px;
  height: 36px;
  opacity: 0.8;
  margin-top: 15px; /* reduced to make it visible in snippet window */
  background: #212e84;
  z-index: 1;
}
.thirdAnimation {
  animation-name: movingbox, fadeIn;
  animation-delay: 4s, 0s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="rectangle thirdAnimation"></div>

＆＃13;

^{注意：在代码段中，我使用了无前缀库来避免所有浏览器前缀。}

Answer 2

Simillar在此问题：CSS Multiple Animations on single element, no javascript

解决方案：http://jsfiddle.net/kybernaut/vuzzmoxj/1/

仅将类更改为1，例如“动画”而不是css：

.Animation {
    animation-name: fadeIn,movingbox;
    -webkit-animation-name: fadeIn,movingbox;
    -moz-animation-name: fadeInmovingbox;
    -webkit-animation-delay: 3s,4s;
    animation-delay: 3s,4s;
    -moz-animation-delay: 3s,4s;
    -webkit-animation-duration: 3s,3s;
    animation-duration: 3s,3s;
    -moz-animation-duration: 3s,3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

如何使这个矩形对象淡入然后执行另一个动画？

2 个答案: