不使用 z-index 的卡片动画

Question

我正在为卡片制作动画。我想知道如何在不为 z-index 设置动画的情况下对卡片动画产生相同的效果。 动画应仅使用 transform 和 opacity 属性。

我想在动画中不使用z-index也能达到同样的效果（如下图所示），因为会导致画图.

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}

.item {
  padding: 8px;
  background-color: blue;
  color: white;
  opacity: 0;
  height: 30px;
  width: 32px;
  text-align: center;
  position: absolute;
  top: auto;
  bottom: 0;
  animation: AnimateCard 16s infinite
    cubic-bezier(0.48, 0.18, 0.35, 1.01);
}

.item:nth-child(1) {
  animation-delay: -9s;
}
.item:nth-child(2) {
  animation-delay: -5s;
}
.item:nth-child(3) {
  animation-delay: -1s;
}
.item:nth-child(4) {
  animation-delay: 3s;
}

@keyframes AnimateCard {
  0% {
    transform: translateY(-72px);
    z-index: 1;
    opacity: 0;
  }
  26% {
    transform: translateY(-72px);
    z-index: 1;
    opacity: 0.2;
  }
  34% {
    transform: translateY(-36px);
    z-index: 1;
    opacity: 0.3;
  }
  51% {
    transform: translateY(-36px);
    z-index: 1;
    opacity: 0.3;
  }
  58% {
    transform: translateY(0);
    opacity: 1;
  }
  74% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Answer 1

我从 关键帧 中删除了 z-index 并且只是对您现有的 CSS 样式代码做了一些小改动所以检查下面的片段。

*,::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    box-shadow: 0 0 0 1px red;
    height: 200px;
    width: 64px;
    overflow: hidden;
}
.item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: blue;
    color: white;
    height: 60px;
    width: 64px;
    text-align: center;
    position: absolute;
    top: auto;
    bottom: 0;
    animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}
.item:nth-child(1) {
    animation-delay: -9s;
}
.item:nth-child(2) {
    animation-delay: -5s;
}
.item:nth-child(3) {
    animation-delay: -1s;
}
.item:nth-child(4) {
    animation-delay: 3s;
}
@keyframes AnimateCard {
  0% {
    transform: translateY(-210px);
    opacity: 0;
  }
  26% {
    transform: translateY(-140px);
    opacity: 0.5;
  }
  34% {
    transform: translateY(-70px);
    opacity: 0.2;
  }
  51% {
    transform: translateY(-70px);
    opacity: 0.2;
  }
  58% {
    transform: translateY(0);
    opacity: 1;
  }
  74% {
    transform: translateY(0);
    opacity: 1;
  }
  91% {
    transform: translateY(140px);
    opacity: 1;
  } 
  100% {
    transform: translateY(210px);
    opacity: 0;
  }
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

Answer 2

为了在 4 和 1 之间实现更明显的淡化效果，我应用了两个更改：

从关键帧中删除了z-index
将 100% 关键帧更改为 83%，这样它会在 100% 之前淡出。

这是完整的片段：

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}

.item {
  padding: 8px;
  background-color: blue;
  color: white;
  opacity: 0;
  height: 30px;
  width: 32px;
  text-align: center;
  position: absolute;
  top: auto;
  bottom: 0;
  animation: AnimateCard 16s infinite
    cubic-bezier(0.48, 0.18, 0.35, 1.01);
}

.item:nth-child(1) {
  animation-delay: -9s;
}
.item:nth-child(2) {
  animation-delay: -5s;
}
.item:nth-child(3) {
  animation-delay: -1s;
}
.item:nth-child(4) {
  animation-delay: 3s;
}

@keyframes AnimateCard {
  0% {
    transform: translateY(-72px);
    opacity: 0;
  }
  26% {
    transform: translateY(-72px);
    opacity: 0.2;
  }
  34% {
    transform: translateY(-36px);
    opacity: 0.3;
  }
  51% {
    transform: translateY(-36px);
    opacity: 0.3;
  }
  58% {
    transform: translateY(0);
    opacity: 1;
  }
  74% {
    transform: translateY(0);
    opacity: 1;
  }
  83% {
    transform: translateY(0);
    opacity: 0;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Answer 3

我们可以将最底部的矩形裁剪到高度 0，因为顶部的矩形在其上折叠：

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
}

.item {
  padding: 8px;
  background-color: blue;
  color: white;
  opacity: 0;
  height: 30px;
  width: 32px;
  text-align: center;
  position: absolute;
  top: auto;
  bottom: 0;
  animation: AnimateCard 16s infinite cubic-bezier(0.48, 0.18, 0.35, 1.01);
}

.item:nth-child(1) {
  animation-delay: -9s;
}

.item:nth-child(2) {
  animation-delay: -5s;
}

.item:nth-child(3) {
  animation-delay: -1s;
}

.item:nth-child(4) {
  animation-delay: 3s;
}

@keyframes AnimateCard {
  0% {
    transform: translateY(-72px);
    opacity: 0;
  }
  26% {
    transform: translateY(-72px);
    opacity: 0.2;
  }
  34% {
    transform: translateY(-36px);
    opacity: 0.3;
  }
  51% {
    transform: translateY(-36px);
    opacity: 0.3;
  }
  58% {
    transform: translateY(0);
    opacity: 1;
  }
  74% {
    transform: translateY(0);
    opacity: 1;
  }
  76% {
    clip: rect(0px, 32px, 32px, 0px);
  }
  85% {
    clip: rect(32px, 32px, 32px, 0px);
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

不使用 z-index 的卡片动画

Cards animation without using z-index

html

css

animation

css-animations