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

如果您选择使用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>

Answer 2

您可以使用负延迟来实现这一目标。

我已经使用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>

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

2 个答案: