我想让这个矩形淡入然后播放第二个动画?然而目前它并没有淡入,几秒钟后才播放第二个动画。
HTML 代码:
<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;
}
最佳答案
您不能在 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
会使它立即开始并且 animation-duration
为 3s
意味着,它将在移动框动画开始之前完成(延迟 4 秒后)。您可以根据需要使用 animation-delay
和 animation-duration
。
@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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="rectangle thirdAnimation"></div>
注意:在代码片段中,我使用了无前缀库来避免所有浏览器前缀。
关于css - 如何让这个矩形对象淡入然后执行另一个动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31813012/