Text Fade-in Animation with CSS 3

Question

Text Fade-in Animation with CSS 3

Could someone assist me in creating an animation similar to a marquee using CSS "animation" and "keyframes"?

I attempted to move text from top to bottom, but encountered an issue where the text would only restart its movement from the top once it reached the bottom. I am looking for a continuous scroll effect.

Your help is greatly appreciated.

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>

css css-animations

Answer 1

Answer №1

If you want to achieve a scrolling effect for your content, consider using the marquee effect.

To start the animation with a negative position and stop at the last top position of 95%, extending some position value to 100%, add it to the positive 0% keyframe value.
Enclose the div within a container and set the height of the container equal to the top value at 95%. Apply overflow: hidden to give the appearance of the content sliding out of view from the container.
For smoother motion, use
```
animation-timing-function: linear
```
to maintain a consistent timing 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>

Answer 2

If you want to achieve a scrolling effect for your content, consider using the marquee effect.

To start the animation with a negative position and stop at the last top position of 95%, extending some position value to 100%, add it to the positive 0% keyframe value.
Enclose the div within a container and set the height of the container equal to the top value at 95%. Apply overflow: hidden to give the appearance of the content sliding out of view from the container.
For smoother motion, use
```
animation-timing-function: linear
```
to maintain a consistent timing 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>

Text Fade-in Animation with CSS 3

Answer №1

Similar questions

Using selenium in conjunction with python to click a unique button

What is the best way to add a line next to a specific word in a

Tips on incorporating a repeating gradient instead of a linear gradient

What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

Limiting overflow:visible to input and select fields only

Give a sidebar within a grid layout a sticky position

Is there a way to style the nav-item element specifically on the current page I'm viewing?

Encountering a problem with Selenium when dealing with tabular data displayed in a DIV format on a website, where each row is encapsulated within its own DIV element

Tips for altering CSS using the `:hover` pseudo-class

What steps can be taken to address the build problem with Angular version 13?

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

What is the best way to align the menu to the center

Creating a Google Captcha with validation is a straightforward process that can enhance the

Achieving a scrolling body with a fixed header in a Vue b-table

What is the best way to position a website in the center in the provided example?

Tips for adjusting the width of an HTML element that is set to position: fixed

IE11 not running Angular code inline as expected

What is the best way to horizontally center a div while ensuring the content within the div stays aligned?

It's impossible for me to align two blocks at the same level