CSS转换和转换

Question

我目前正在进行一个项目，需要像动画(像这样)这样的Windows 10瓷砖/块。

每个块/块具有以下结构。

<div class="wrapper">
   <div class="block-1">
      <p>some text</p>
   </div>
   <div class="block-2">
      <p>some other text</p>
   </div>
</div>

我想要实现这样的动画，block-1最初应该掩盖整个wrapper的空间。10秒后，block-2应该从wrapper底部滑行，并将block-1推出wrapper。同样，在10秒的间隙之后，block-1应该从wrapper的顶部滑行，并将block-2从wrapper中推出来。这应该每10秒进行一次。

在动画过程中，块不应重叠，而应在占用wrapper时互相推送。(就像Windows10平铺动画一样)。

动画应该有一个整洁的过渡。我试过使用CSS转换，但无法完美地实现它。

如果有人能做到这一点，对我会有很大的帮助。

Answer 1

通过jQuery和CSS转换，给出了一个如何在15分钟内根据HTML完成这一任务的示例。

如果你有什么问题请告诉我！

​

function slide() {
  var transitionPause = 3000;

  setTimeout(function() {
    $('.wrapper').each(function() {
      $(this).find('.slider').toggleClass('active');
      slide();
    });
  }, transitionPause);
}

slide();

.wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.slider {
  height: 200%;
  transition: transform 1s;
}

.slider.active {
  transform: translateY(-50%);
}

.block {
  height: 50%;
}


/* styles unrelated to the animation: */

.block-1 { background: pink; }
.block-2 { background: teal; }

p {
  color: white;
  margin: 0;
  padding: 1em;
  font-family: sans-serif;
}

body {
  background: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="slider">
    <div class="block block-1">
      <p>Block 1</p>
    </div>
    <div class="block block-2">
      <p>Block 2</p>
    </div>
  </div>
</div>

​