CSS animation to move divs upwords-CodePudding

I want to use CSS animation to move these divs upwards as shown in the GIF attached below.

All the divs move upwards at the same speed.

I tried the marquee tag but from what I heard, it's depreciated or will be depreciated soon. So I can't use it.

I have never done CSS animation. So would really appreciate your help.

Each column has 6 items. When the entire 6 items are finished, it starts from item 1 again. Elements that overflow remain hidden, till all other items are displayed and then appear from the bottom again after the 6th element.

Video demo here

.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>

CodePudding user response：

One way of achieving a continuous movement is to have two copies of everything within a single container.

Then the container is translated upwards but just half of its height - the second copy will be overwritten by the first at the end of the animation so things look continuous.

This snippet assumes that the outer container may be of a different (smaller) height (as shown in the gif - not all the messages show at once) - so there is an outer container with overflow hidden and an inner container which is what is translated upwards.

<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 >
<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 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>

CodePudding user response：

Something like this can be done:

.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;
}

.grid--1x3 {
  animation: marquee 5s infinite;
  position: relative;
}

@keyframes marquee {
  from {
    top: 0;
  }
  to {
    top: -500px;
  }
}

<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>

CodePudding user response：

.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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

You can use keyframes to add animations

CodePudding user response：

First, your grid should be shorter in length than the elements it contains to create an overflow. Then you can shift the columns that are in the grid with the transform: translateY() propery.

However you want to create an animation I see in your example, so you will have to define a keyframe to create an animation.

I have taken the following steps in the example below:

Created a variable containing the height of the grid. I did this because we need this exact value in 2 different places.
Set the height of the grid based on the variable.
Set overflow to hidden, so that the "overflow" is not visible.
Created a keyframe called slide. In this keyframe you see 2 steps: 0%: with the value transform: translateY(0). This indicates the normal position, so nothing happens yet. 100%: This is the end of the animation. With -100% I indicate that I want the last element at the beginning of the grid. However, we run into a problem: in your example I see that you want the last element to stop at the bottom of the grid. To achieve this we have to stop the animation a little earlier. Using a calc() function where we add the height of the grid to the -100%, we arrive at the bottom of the grid.
The animation applied to the columns for a time of 10s, with the setting infinitate so that the animation keeps repeating

: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 >
  <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 >
  <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 >
  <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>