Анимация карточек без использования z-index

Я создаю анимацию для карт. Интересно, как добиться такого же эффекта для анимации карты, но без анимации 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>

Я только что прокомментировал z-index. jsfiddle.net/sumit_sharmaXD/ry6pqhgn/9 Анимация не такая же?

— 11.05.2022 12:20

Почти, однако, если вы посмотрите, что элемент 4 попал в нижнюю часть, он переопределяет элемент 1.

— 11.05.2022 12:24

О верно! я только что заметил

— 11.05.2022 12:26

Вы можете опубликовать свой ответ, когда он будет готов, потому что я предлагаю награду за этот вопрос, вам понравится, спасибо :)

— 11.05.2022 12:29

Да, это немного сложно, когда вы удаляете свойство z-index

— 11.05.2022 12:29

html css animation css-animations

07.05.2022 18:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

128

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я удалил z-индекс из ключевые кадры и просто внес небольшие изменения в ваш существующий код стиля 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>

Однако эффект анимации уже не тот. Когда каждый элемент дойдет до конца, мы должны увидеть, что он останется, а затем другой элемент закроет текущий элемент, например анимацию, которую я дал. Я хотел бы удалить индекс z внутри ключевых кадров, однако тот же эффект для анимации

— 10.05.2022 18:12

10.05.2022 07:03

Ответ принят как подходящий

Чтобы добиться более заметного эффекта затухания между 4 и 1, я применил два изменения:

удален z-индекс из ключевых кадров
изменил ключевой кадр 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>

Когда элемент находится внизу, он все еще должен иметь непрозрачность 1, пока другой элемент не закроет его.

— 12.05.2022 01:31

Ключевые кадры не должны иметь свойство z-index.

— 12.05.2022 01:34

11.05.2022 18:28

Мы можем обрезать самый нижний прямоугольник до высоты 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.

— 12.05.2022 11:06

Он должен иметь только свойства преобразования и непрозрачности.

— 12.05.2022 11:07

@Винс мой плохой! Мне пришлось снова скопировать исходный код, затем я забыл удалить z-index. :P Постараюсь найти ответ только с transform и opacity.

— 12.05.2022 11:33

Я думаю, что без использования каких-либо других свойств в анимации мы получим ответы, подобные ответу @lemon, где перекрытие не будет хорошо сочетаться.

— 12.05.2022 11:46

реальная проблема заключается в том, что нет возможности указать анимацию, похожую на «затухание», по этой причине номер 1 всегда будет под номером 4, учитывая доступные свойства css (кроме z-index)

— 12.05.2022 13:55

Да @theHutt я согласен

— 12.05.2022 15:38

Спасибо, @lemon, я только что понял об этом человеке, спасибо

— 12.05.2022 15:40

@theHutt Если использовать свойство clip, это приведет к рисованию для производительности, поэтому я хочу только преобразование и непрозрачность в ключевых кадрах.

— 12.05.2022 15:45

Привет, могу я попросить вас в моем последнем посте о масштабировании текущего элемента карусели до 1

— 12.05.2022 16:07

12.05.2022 11:03