All geek questions in one place

CSS Animate text from left to right in an overflow div container hidden

So, I recently worked on some private project, and since I am a big fan of CSS, I want to make most of the animations in CSS, not JavaScript.

Today I wanted to create something like this: Text moves from left to right

I think this is possible with CSS Animations. Theoretically, I have a wrapper div with position: relative, fixed width and overflow: hidden. Inside there is a div with the position: absolute and left: 0 and bottom: 0. Now, in some cases, the text is too long for the parent div, and I wanted the text to “float”, although the parent div: in fact the animation div on the left: 0 to the right: 0.

I came across some CSS animations and tried this

@keyframes floatText{ from { left: 0; } to { right: 0; } }

on the child div. And of course, this did not work. Animations like left: 0 left: -100px work, but this does not guarantee that all text will be visible if it is longer than 100px. Is there a good and clean way to do this job? JavaScript, of course, can break this desired functionality. But I wanted to know if there is a way to do this in pure CSS.

Thanks in advance!

EDIT:

To figure out what is on my mind, I created a gif showing what I want to accomplish using CSS animations: Animated

As you can see, we have three of these kinds next to each other, some have a name that fits directly, some others can be too long and need to be animated back and forth, so the user can read it :)!

Thanks again!

EDIT2:

Is there a way to do something like this?

 @keyframes floatText{ from { left: 0px; } to { left: (-this.width+parent.width)px; } }

That would be the final solution, I know that this type of coding is not possible in CSS, but maybe with some CSS3 tweets like calc () or something else? Now I have no ideas :(

+5
source share
4 answers

change the keyframe value in %

Try

 body{ overflow: hidden; } p{ position: absolute; white-space: nowrap; animation: floatText 5s infinite alternate ease-in-out; } @-webkit-keyframes floatText{ from { left: 00%; } to { /* left: auto; */ left: 100%; } } 
 <p>hello text</p>
+3
source

Add smoothness to the animation for smoothness and use% instead of px to move it left or right.

0
source

Hi dude i tried this

Note: but you will find that one thing is missing and will see that the animation does not reach purely left and right, I mean that you cannot see the whole text of the div.

and this is due to the fact that the value on the left and right is set to -100 and 100 strong>, because I could not find an alternative for this, therefore

right now, trying to figure out how to do this.

and here is my attempt

 div.main_div{ margin:0; padding:0; width: 20%; height: 60%; background-color:grey; position:absolute; overflow: hidden; } div.transparent_div{ width:100%; height:50px; bottom:0; background:red; position:absolute; } div.text_wrapper{ height:50px; bottom:0; z-index:10; background:transparent; white-space: nowrap; font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; color:white; font-size:2em; vertical-align: middle; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; position:absolute; -webkit-animation: anim 1.5s infinite; animation: anim 1.5s infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ animation-timing-function: linear; } @-webkit-keyframes anim { from { left: -100%; } to { left:100%; } } @keyframes anim { from { left: -100%; } to { left:100%; } } 
 <body> <div class="main_div"> <div class="text_wrapper">Hiii i am going right to left infinete times and here are the news </div> <div class="transparent_div"></div> </div> </body>

and here you can check the demo of the above working code

Demo code

0
source

CSS

 div { position: relative; animation: animate 5s; animation-direction: alternate; } @keyframes animate { 0% {left: 0px;} 25% {left: 20px;} 50% {left: 50px;} 75% {left: 100px;} 100% {left: 150px;} }

You can make the animation smoother by adding more% and px values.
EDIT : Sorry, I just saw the picture you linked and noticed that you want it to move down when it moves to the right. Next to left: 0px; add top: 10px; or, if you want it to move with the given%.

-1
source

Source: https://habr.com/ru/post/1233475/

More articles:


All Articles