CSS 3 Animation (Text from Top to bottom)

Question

I am trying to make animation similar to marquee using "animation" and "keyframes" in CSS.

I was trying to move text from to bottom. But, as the text moves from top once, it starts to move from top again only after when whole text reaches at bottom. I wanted to have this continuous.

Please help.

Code

@keyframes movingTopToBottom {
  0% {
    top: 50px;
  }
  100% {
    top: 90px;
  }
}
#divTAReviews {
  animation: movingTopToBottom 3s ease infinite;
  -webkit-animation: movingTopToBottom ease 3s infinite;
  position: absolute;
}

<div id="container">
  <div id="divTAReviews">
    <div>
      <p class="styling" style="background-color:lightblue;"></p>
    </div>
    <div>
      <p class="styling" style="background-color:lightgreen;opacity:0.3"></p>
    </div>
    <div>
      <p class="styling" style="background-color:palevioletred;opacity:0.3">.</p>
    </div>
    <div>
      <p class="styling" style="background-color:orchid;opacity:0.2"></p>
    </div>
  </div>
</div>

Solution

If you need to create marquee effect for it.

1. Start the animation with -ve position and stop the last top position at 95% and extend some position value at 100%, additive to the +ve 0% keyframe value.
2. Wrap the div inside a container and let the height of the container be equal to the top value at 95%. overflow: hidden will give it a effect as if it is sliding away from the container.
3. In this case, animation-timing-function: linear will give it a better effect as it preserves the same timing level curve throughout the animation.

@keyframes movingTopToBottom {
  0% {
    top: -15px;
  }
  95% {
    top: 150px;
  }
  100% {
    top: 165px;
  }
}
.container {
  height: 150px;
  overflow: hidden;
}
#divTAReviews {
  animation: movingTopToBottom 5s linear infinite;
  position: relative;
  background: lightblue;
  display: inline-block;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div id="divTAReviews">Review Text1</div>
</div>

Comments

[Mattias Lindberg]

Please include your code so it is possible to review it and help you find your problem.

[m4n0]

It is not easy to find a solution without seeing your code.

[shweta babbar]

Added the code..Thanks in advance.

[shweta babbar]

Hi Manoj Thanks ..this is working..I have multiple divs one over other. Is it possible to bring bottom most div to top as soon as it reaches the bottom. Please chk the code. Thanks <div id="container"><div id="divTAReviews"> <div> <p class="styling" style="background-color:lightblue;"></p> </div> <div> <p class="styling" style="background-color:lightgreen;opacity:0.3"></p></div> <div> <p class="styling" style="background-color:palevioletred;opacity:0.3">.</p> </div> <div> <p class="styling" style="background-color:orchid;opacity:0.2"></p></div> </div> </div>

[m4n0]

Hi Shweta, please use the edit option in the question to update your code. CSS animation does not work that way. You need to wait for CSS3 marquee module: w3.org/TR/css3-marquee (seems like it has been discontinued) or check this fiddle: jsfiddle.net/jonathansampson/XxUXD