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

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 :(

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>

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

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

来源：https://stackoverflow.com/questions/33068754/css-animate-text-from-left-to-right-in-div-container-with-overflow-hidden

标签

css

css3

css-animations