在包含元素可见之前开始 CSS 动画

Question

我正在制作一个动画，我希望 4 个元素看起来彼此独立浮动，为了实现我对所有 4 个元素使用相同的动画，但使用animation-delay来确保它们独立浮动。这样做的问题是，这些动画发生在页面加载时隐藏的元素中，当该元素变得可见时，您可以看到动画延迟发生。是否可以在包含元素仍处于隐藏状态时开始动画，以便看不到延迟？否则，让它们彼此独立浮动而不会使 CSS 过于复杂的最佳方法是什么？

$(function() {
$('button').click(function(e) {
e.preventDefault();
$('.scene.one').hide();
$('.scene.two').fadeIn(500);
});
});

.scenes {
height:150px;
width:300px;
border:1px solid black;
}
h1 {
margin:0;
}
p {
margin-bottom:0;
font-size:12px;
}
.scene {
position:relative;
height:100%;
width:100%;
text-align:center;
display:none;
}
.scene-container {
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.scene.one {
display:block;
}

.float {
display:inline-block;
width:25px;
height:25px;
background:black;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.animated .float {
animation-name:floating;
}
.float:nth-child(2) {
animation-delay:.5s;
}
.float:nth-child(3) {
animation-delay:1.5s;
}
.float:nth-child(4) {
animation-delay:1s;
}
@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, -0px); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
<div class="scene one">
<div class="scene-container">
<h1>WELCOME</h1>
<button>Next scene</button>
<p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
</div>
</div>
<div class="scene two">
<div class="scene-container">
<div class="float-container animated">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
</div>
</div>
</div>

Answer 1

您可以使用负延迟来实现此目的。

我使用 calc 设置它们以使逻辑清晰，但您也可以使用计算值。

任何除以动画持续时间后给出相同提醒的值都将保持视觉效果不变

$(function() {
$('button').click(function(e) {
e.preventDefault();
$('.scene.one').hide();
$('.scene.two').fadeIn(500);
});
});

.scenes {
height:150px;
width:300px;
border:1px solid black;
}
h1 {
margin:0;
}
p {
margin-bottom:0;
font-size:12px;
}
.scene {
position:relative;
height:100%;
width:100%;
text-align:center;
display:none;
}
.scene-container {
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.scene.one {
display:block;
}

.float {
display:inline-block;
width:25px;
height:25px;
background:black;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.animated .float {
animation-name:floating;
}
.float:nth-child(2) {
animation-delay:calc(.5s - 3s);
}
.float:nth-child(3) {
animation-delay:calc(1.5s - 3s);
}
.float:nth-child(4) {
animation-delay:calc(1s - 3s);
}
@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, -0px); }    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
<div class="scene one">
<div class="scene-container">
<h1>WELCOME</h1>
<button>Next scene</button>
<p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
</div>
</div>
<div class="scene two">
<div class="scene-container">
<div class="float-container animated">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
</div>
</div>
</div>

Answer 2

如果您选择使用visibility: visible和visibility: hidden而不是display那么您可以在用户看到元素之前对其进行动画处理。不幸的是，这意味着您将无法获得淡入淡出效果(因为这专门适用于display(，但如果这是可选的，这对您来说可能是一个可行的解决方案：

$(function() {
$('button').click(function(e) {
e.preventDefault();
$('.scene.one').css('display', 'none');
$('.scene.two').css('visibility', 'visible');
});
});

.scenes {
height: 150px;
width: 300px;
border: 1px solid black;
}
h1 {
margin: 0;
}
p {
margin-bottom: 0;
font-size: 12px;
}
.scene {
position: relative;
height: 100%;
width: 100%;
text-align: center;
visibility: hidden;
}
.scene-container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.scene.one {
visibility: visible;
}
.float {
display: inline-block;
width: 25px;
height: 25px;
background: black;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.animated .float {
animation-name: floating;
}
.float:nth-child(2) {
animation-delay: .5s;
}
.float:nth-child(3) {
animation-delay: 1.5s;
}
.float:nth-child(4) {
animation-delay: 1s;
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, -0px);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
<div class="scene one">
<div class="scene-container">
<h1>WELCOME</h1>
<button>Next scene</button>
<p>(Wait 2 seconds before clicking)</p>
</div>
</div>
<div class="scene two">
<div class="scene-container">
<div class="float-container animated">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>
</div>
</div>
</div>