Анимация CSS для перемещения div вверх по словам

Я хочу использовать анимацию CSS, чтобы переместить эти элементы div вверх, как показано на приложенном ниже GIF-файле.

Все дивы движутся вверх с одинаковой скоростью.

Я попробовал тег marquee, но, насколько я слышал, он обесценился или скоро будет обесценен. Так что я не могу его использовать.

Я никогда не занимался CSS-анимацией. Так что был бы очень признателен за вашу помощь.

В каждом столбце по 6 элементов. Когда все 6 пунктов закончены, он снова начинается с пункта 1. Элементы, которые переполняются, остаются скрытыми до тех пор, пока не будут отображены все остальные элементы, а затем снова появляются снизу после 6-го элемента.

Анимация CSS для перемещения div вверх по словам

.gridcontainer{
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;
  

}

.grid{
display:grid;
justify-items: center
}


    .grid--1x3{
      grid-template-columns: 1fr 1fr 1fr;
     justify-items: "center"
    }
    
    .flexcolumn {
    display:flex;
    flex-direction: column;
    }

    <div class='grid grid--1x3'>

<div class='flexcolumn'>
<span class='gridcontainer'>Element A</span>
<span class='gridcontainer'>Element B</span>
<span class='gridcontainer'>Element C</span>
<span class='gridcontainer'>Element D</span>
<span class='gridcontainer'>Element E</span>
<span class='gridcontainer'>Element F</span>

</div>
<div class='flexcolumn'>
<span class='gridcontainer'>Element A</span>
<span class='gridcontainer'>Element B</span>
<span class='gridcontainer'>Element C</span>
<span class='gridcontainer'>Element D</span>
<span class='gridcontainer'>Element E</span>
<span class='gridcontainer'>Element F</span>

</div>

<div class='flexcolumn'>
<span class='gridcontainer'>Element A</span>
<span class='gridcontainer'>Element B</span>
<span class='gridcontainer'>Element C</span>
<span class='gridcontainer'>Element D</span>
<span class='gridcontainer'>Element E</span>
<span class='gridcontainer'>Element F</span>

</div>

</div>

GIF имеет своего рода рывки при перезапуске — я прав, что вы хотели бы, чтобы непрерывный поток этих элементов шел вверх?

— 21.10.2022 14:22

В вашем вопросе говорится, что в каждом столбце есть 10 элементов, но ваш код показывает только 6. Как правильно?

— 21.10.2022 14:23

Предположим 6. Да, непрерывный поток этих элементов идет вверх.

— 21.10.2022 14:27

У меня нет времени снимать код для вас. Но проверьте эту статью: ryanmulligan.dev/blog/css-marquee и эту демонстрацию: codepen.io/hexagoncircle/full/wvmjomb

— 21.10.2022 14:50

css css-animations

21.10.2022 13:15

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 3

.container {
  position: absolute;
  bottom: 0;
  display: flex;
  animation-name: move;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.box{
  width: 200px;
  height: 100px;
  background: red;
  margin-right: 10px;
}

@keyframes move {
   from { bottom: 0   }
   to   { bottom: 200px }
}

<div class = "container">
  <div class = "box"></div>
  <div class = "box"></div>
  <div class = "box"></div>
  <div class = "box"></div>
  <div class = "box"></div>
  <div class = "box"></div>
</div>

Вы можете использовать ключевые кадры для добавления анимации

21.10.2022 15:06

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

Один из способов добиться непрерывного движения — иметь две копии всего в одном контейнере.

Затем контейнер перемещается вверх, но только на половину своей высоты — вторая копия будет перезаписана первой в конце анимации, чтобы все выглядело непрерывно.

В этом фрагменте предполагается, что внешний контейнер может иметь другую (меньшую) высоту (как показано на рисунке — не все сообщения отображаются сразу) — поэтому есть внешний контейнер со скрытым переполнением и внутренний контейнер, который и переводится вверх.

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.gridcontainer {
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;
}
.outer {
  overflow: hidden;
  height: 400px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.inner {
  animation: move 10s linear infinite;
  rposition: relative;
  height: fit-content;
  
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.grid {
  display: grid;
  gap: 2vw;
  justify-content: space-around;
  height: fit-content;
}

.grid--1x3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
}
</style>
<div class = "outer">
<div class = "inner">
  <div class='grid grid--1x3'>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

  </div>
  <div class='grid grid--1x3'>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>

    </div>

  </div>
</div>
</div>

21.10.2022 15:26

Во-первых, ваша сетка должна быть короче содержащихся в ней элементов, чтобы создать переполнение. Затем вы можете сдвинуть столбцы в сетке с помощью свойства transform: translateY().

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

В приведенном ниже примере я предпринял следующие шаги:

Создал переменную, содержащую высоту сетки. я сделал это потому что нам нужно это точное значение в двух разных местах.
Установите высоту сетки на основе переменной.
Установите переполнение как скрытое, чтобы «переполнение» не было видно.
Создал ключевой кадр под названием слайд. В этом ключевом кадре вы видите 2 шага: 0%: со значением transform: translateY(0). Это указывает на нормальное положение, пока ничего не происходит. 100%: Это конец анимация. С -100% я указываю, что мне нужен последний элемент в начало сетки. Однако мы сталкиваемся с проблемой: в вашем примере я вижу, что вы хотите, чтобы последний элемент останавливался внизу сетки. Для этого нам нужно немного остановить анимацию. ранее. Использование функции calc(), где мы добавляем высоту сетки до -100%, мы достигаем нижней части сетки.
Анимация применяется к столбцам в течение 10 с, с установка бесконечности, чтобы анимация продолжала повторяться

:root {
  /*   step 1 */
  --height: 250px;
}
.gridcontainer{
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;

}

.grid{
display:grid;
justify-items: center;
background-color: red;
/*   step 2 */
height: var(--height);
/*   step 3 */
overflow: hidden;
}


    .grid--1x3{
      grid-template-columns: 1fr 1fr 1fr;
     justify-items: "center"
    }
    
    .flexcolumn {
    display:flex;
    flex-direction: column;
    /*   step 5 */
    animation: slide 5s infinite;
    }

/*   step 4 */
@keyframes slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + var(--height)));
  }
}

  <div class='grid grid--1x3'>

<div class = "flexcolumn">
  <span class='gridcontainer'>Element A</span>
  <span class='gridcontainer'>Element B</span>
  <span class='gridcontainer'>Element C</span>
  <span class='gridcontainer'>Element D</span>
  <span class='gridcontainer'>Element E</span>
  <span class='gridcontainer'>Element F</span>
</div>
    
<div class = "flexcolumn">
  <span class='gridcontainer'>Element A</span>
  <span class='gridcontainer'>Element B</span>
  <span class='gridcontainer'>Element C</span>
  <span class='gridcontainer'>Element D</span>
  <span class='gridcontainer'>Element E</span>
  <span class='gridcontainer'>Element F</span>
</div>
    
<div class = "flexcolumn">
  <span class='gridcontainer'>Element A</span>
  <span class='gridcontainer'>Element B</span>
  <span class='gridcontainer'>Element C</span>
  <span class='gridcontainer'>Element D</span>
  <span class='gridcontainer'>Element E</span>
  <span class='gridcontainer'>Element F</span>
</div>
    
    


</div>

21.10.2022 15:32

Другие вопросы по теме

Полигональная анимация CSS не работает при наведении курсора на путь клипа

Как запустить/приостановить анимацию, удерживая любую клавишу и отпуская ее?

Как я могу анимировать изображение с помощью CSS, чтобы оно перемещалось линейно и одновременно сжималось?

Как сделать так, чтобы состояние воспроизведения анимации было приостановлено для работы в React при наведении

CSS: Как мне масштабировать элемент с постоянной скоростью, используя кубический безье?

Можно ли получить больше контроля над этой анимацией CSS?

Анимация-воспроизведение-состояние прямоугольного штриха SVG не изменится по сравнению с Javascript

Настройка трапецеидального искажения анимации эффекта ввода

Как я могу заставить мой шлифовальный станок svg вращаться с помощью анимации CSS, оставаясь на месте?

Анимация текста с автопрокруткой в CSS не работает до конца

Анимация CSS для перемещения div вверх по словам

Ответы 3

Другие вопросы по теме

Похожие вопросы