12

So i've recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.

Today i wanted to create something like this: Text moving from left to right

I think this might be possible with CSS Animations. In theory, I have a div wrapper with position:relative, a fixed width and overflow:hidden. Inside, there is a div with position:absolute and left:0 and bottom:0. Now in some cases, the text is too long for the parent div, and i wanted to let text text "float" though the parent div: actually animating the div from left:0 to right:0.

I stumbled upon some CSS Animations and tried this 

@keyframes floatText{
  from {
    left: 0;
  }

  to {
    right: 0;
  }
}

on the child div. And of course this didn't worked. Animations like from left :0 to left: -100px work, but this doesn't ensure that the whole text is visible, when it is longer than those additional 100px. Is there a nice and clean way to make this work? Surely JavaScript might rock this desired functionality. But I'd wanted to know if there is a way to do this in pure CSS.

Thanks in advance!

EDIT:

To clearify what I have in my mind, i've created a gif displaying what i want to accomplish with CSS animations: Animated

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

Thanks again!

EDIT2:

Is there a way to accomplish something like this?

@keyframes floatText{
  from {
    left: 0px;
  }

  to {
    left: (-this.width+parent.width)px;
  }
}

This would be the ultimate solution, I know that this kind of coding is not possible in CSS, but maybe with some CSS3 tweaks like calc() or something? I'm out of ideas now :(

Improve this question
1
  • did you manage to do it? Commented Feb 14, 2019 at 19:56

5 Answers 5

Reset to default
18

You can stop when your text hits the right border

This solution uses CSS translate.

The trick is that translate's percentages are corresponding to the current element and left referrs to the parent.

Make sure your text's display property is NOT inline.

Downsides of this CSS only approach:

  1. Shorter texts also get animated. To counter that consider JavaScript or make your text min-width: 100%;. This can lead to minimal wiggling by the animation.
  2. All texts get the same amount of animation duration, which can be awful for long texts. Again, consider JavaScript (you'll want to look at scrollWidth) or make many animation classes, which can be very hard to manage.

.animated {
  overflow: hidden;
  width: 11rem;
  white-space: nowrap;
}

.animated > * {
  display: inline-block;
  position: relative;
  animation: 3s linear 0s infinite alternate move;
}

.animated > *.min {
  min-width: 100%;
}

@keyframes move {
  0%,
  25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

/* Non-solution styles */

.container {
  display: flex;
  flex-wrap: wrap;
}

.animated {
  font-size: 2rem;
  font-family: sans-serif;
  border: 0.1rem solid black;
  margin: 1rem;
}

.animated > * {
  box-sizing: border-box;
  padding: .5rem 1rem;
}
<div class="container">

<div class="animated">
  <span>Short</span>
</div>
<div class="animated">
  <span class="min">Short</span>
</div>
<div class="animated">
  <span>Some more text</span>
</div>
<div class="animated">
  <span>A really long text to scroll through</span>
</div>

</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

8

change your keyframe value in %

Try This

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>

Improve this answer

Comments

1

hi dude i have tried this

Note : but you will find one thing is missing and will see that animation will not reach to the purely left and right i mean you can't see the whole text of the div.

and that is due to the value of the left and right i have set to the -100 and 100 so because i couldn't find the alternative for that so

right now trying to see that how can you make this happen.

and here is my try

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 out the demo of the above working code

DEMO CODE

Improve this answer

2 Comments

@SunTastic please check out the answer
Thanks for your answer, but as you already mentioned, this doesnt perfectly work. :( The animation has to be something like from: left:0px to left:-this.width+parent.width is there no way CSS3 can accomplish that? I've heard of the function calc() - Could this be the solution? Couldn' imagine, that this is so hard. :D
0

Add ease-in-out to the animation for smoothness, and use % instead of px to move it left or right.

Improve this answer

1 Comment

Thank you, but how much % should I use to always make it always fitting? Please keep in mind that i want that to work for short and long text :) EDIT: The problem is that the child divs have variable widths.
0

we can write jQuery code, for finding over-flow text and enable animation:

    function AutoScrollText() {
        var els = document.getElementsByClassName('container');

        [].forEach.call(els, function myFunction(el) {

            var isOverflowing = el.clientWidth < el.scrollWidth;

            if (isOverflowing) {
                $(el).children('span:first-child').addClass('animated');
            }

            var curOverf = el.style.overflow;
            if (curOverf == "" || curOverf === "visible") {
                $(el).css({ "overflow":"hidden"});
            }
        });
    }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.