Marquee effect in bubble

Hi,

I want to have a banner on top of my page with a marquee effect. I do not want to use the marquee tag as it is deprecated.

Is there any way I could do this?

All you need is an HTML element with the following code. See the demo:
chrome_xFMZb3td2b

<style>
   .cssmarquee {
       position: absolute;
       width: 100%;
       height: 100%;
       margin: 0;
       transform:translateX(100%);
       animation: cssmarquee 5s linear infinite;
   }
   @keyframes cssmarquee {
       0% {
       		transform: translateX(100%);
       }
       100% {
       		transform: translateX(-100%);
       }
   }
</style>
<div class="cssmarquee">
   Hello marquee
</div>

Play with the animation duration 5s to make it faster or smaller and play with height and width as well to fit into your app. You can find more animation options by checking the documentation in CSS: CSS Animations

Here is the editor if you want to check the demo: Tests for Forum 10 | Bubble Editor And here is the original source of the code: https://www.edureka.co/blog/marquees-in-html-css/

This topic was automatically closed after 70 days. New replies are no longer allowed.